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后全棧程序媛?? ??? ??一枚~ 熱愛學習！熱愛編程！ 可關注【貓寧一】公眾號領取我所有全棧項目代碼哦~點擊查看課程目錄：微信小程序全棧開發課程目錄

總結

以上是生活随笔為你收集整理的eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。