1、修改入口文件
也就是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()
2、修改index.vue文件
（1）安装sass插件
我们在style标签中加入lang='scss'，用来支持scss语言的运行环境。如果没有安装sass插件，启动npm run dev会报错，我们先打开终端安装一下scss插件
//打开项目目录
~$ cd WeChatProjects/truth_hold//在项目目录中安装sass插件
~/WeChatProjects/truth_hold$ npm install sass-loader node-sass --save-dev
scss可以看成是css的扩展语言，比css更加简洁灵活。即使你是css零基础，也可以直接学习scss。
（2）修改src/pages/index/index.vue文件
用下面代码替换掉原先的代码，我们用了三种类型的顶级语言块 template, script 和 style。这三个部分分别代表了 html js css，也分别对应着原生小程序框架里中的.wxml .js .wxss文件。这是vue单文件组件的写法，后面我们会经常用到。
<template><div>首页</div>
</template><script>
export default {
}
</script><style lang='scss'>
</style>Vue官方文档 https://cn.vuejs.org/v2/guide/
3、启动项目
//在项目目录中运行npm run dev
~/WeChatProjects/truth_hold$ npm run dev
报了好多错误，看到eslint这个单词，报的错误都是格式的错误。我们只需要先将这类错误规避掉，最后项目上线时统一修改格式就可以了。vue带有专门的工具统一修改，后面上线时会讲。
什么是ESlint？ ESLint 是一个代码规范，它的目标是保证代码的一致性和避免错误。 ESlint 中文官方网站：http://eslint.cn/
4、规避掉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停止）现在已经不报错了。
5、查看效果
打开微信开发者工具，会看到下面的效果~
作者：猫宁一 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！ 可关注【猫宁一】公众号领取我所有全栈项目代码哦~点击查看课程目录：微信小程序全栈开发课程目录
