0
点赞
收藏
分享

微信扫一扫

2.2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误


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>
<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带有专门的工具统一修改,后面上线时会讲。

2.2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误_微信小程序

什么是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、查看效果

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

2.2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误_App_02

2.2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误_开发课程_03

举报

相关推荐

0 条评论