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

痛定思痛。 2023-06-07 14:27 11阅读 0赞

#### 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/][https_cn.vuejs.org_v2_guide]

#### 3、启动项目 ####

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

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

> 什么是ESlint？  
> ESLint 是一个代码规范，它的目标是保证代码的一致性和避免错误。  
> ESlint 中文官方网站：[http://eslint.cn/][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、查看效果 ####

打开微信开发者工具，会看到下面的效果~  
![format_png 1][]

> **作者：猫宁一**  
> 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 2][]

[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/
[format_png]: /images/20230601/dcedcad13de14de28c75f951cad1b79e.png
[http_eslint.cn]: http://eslint.cn/
[format_png 1]: /images/20230601/b7975f6371274cf5b81d495752ec3822.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 2]: /images/20230601/1a9770612d474915a4f1a9911859a819.png