cfree下面显示运行程序错误_微信小程序全栈开发课程【视频版】2.1 小程序前端页面初始配置、ESlint格式错误

点击观看视频 ↓↓↓

小程序前端页面初始配置、ESlinthttps://www.zhihu.com/video/1195030595196223488

课程文字版

1、修改src/pages文件夹

pages文件夹里面是小程序的所有页面，我们将counter、logs这两个文件夹删掉，只留下index文件夹

2、修改src/app.json文件

用下面代码替换掉原先的代码，这个文件与原生小程序框架里面的app.json文件是一样的

{
  "pages": [
    "pages/index/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#EA5149",
    "navigationBarTitleText": "真自律",
    "navigationBarTextStyle": "black"
  }
}

3、删除dist文件夹

后面我们会重新生成，放心大胆的删就可以了

4、启动项目

打开终端，进入到项目目录中，运行npm run dev启动项目，会重新生成dist文件夹

~/truth_hold$ npm run dev
//系统返回消息
> truth_hold@1.0.0 dev /Users/xuzhaoning/truth_hold
> node build/dev-server.js wx
DONE  Compiled successfully in 5412ms 

5、查看效果

打开微信开发者工具，会看到下面效果

6、修改入口文件

也就是src/pages/index/main.js文件

main.js是入口文件，通过main.js来加载index.vue文件。每个页面文件夹中都要有main.js文件

//加载vue组件和index.vue文件
import Vue from 'vue'
import App from './index'

//新建一个index页面的Vue实例
const app = new Vue(App)
//挂载Vue实例，让index页面显示出来
app.$mount()

7、修改src/pages/index/index.vue文件

用下面代码替换掉原先的代码，我们用了三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html js css，也分别对应着原生小程序框架里中的.wxml .js .wxss文件。这是vue单文件组件的写法，后面我们会经常用到。

<template>
  <div>
    首页
  </div>
</template>

<script>
export default {
}
</script>

<style>
</style>

Vue官方文档 https:// cn.vuejs.org/v2/guide/

8、启动项目

//在项目目录中运行npm run dev
~/truth_hold$ npm run dev

报了好多错误，看到eslint这个单词，报的错误都是格式的错误。我们只需要先将这类错误规避掉，最后项目上线时统一修改格式就可以了。vue带有专门的工具统一修改，后面上线时会讲。

什么是ESlint？
ESLint 是一个代码规范，它的目标是保证代码的一致性和避免错误。
ESlint 中文官方网站： http:// eslint.cn/

9、规避掉ESlint格式错误

修改bulid/webpack.base.conf.js文件，找到下面代码注释掉（注释快捷键command+/），记得保存文件哦~~~

// {
//   test: /.(js|vue)$/,
//   loader: 'eslint-loader',
//   enforce: 'pre',
//   include: [resolve('src'), resolve('test')],
//   options: {
//     formatter: require('eslint-friendly-formatter')
//   }
// },

然后重新运行npm run dev（按ctrl+c停止）现在已经不报错了。

10、查看效果

打开微信开发者工具，会看到下面的效果~

关注【猫宁一】公众号回复【课件】领取课程PPT和小程序源码
B站可以1.5倍加速观看视频课程

微信小程序实战开发课程【提供源码】实际上线项目 mpvue+koa2_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com