前言：本期專欄我寫了1天半左右，很適合vue入門，可以解決新手的很多報錯問題，讓新手少走彎路，干貨滿滿！

目錄：

例子1：安裝vue

個人理解VScode中的界面跳轉(zhuǎn)就是在同一個界面中進行組件切換

記得安裝Vetur，Vetur 支持.vue文件的語法高亮顯示，除了支持template模板以外，還支持大多數(shù)主流的前端開發(fā)腳本和插件，比如 Sass 和 TypeScript。如果不安裝Vetur，vue文件在VScode中就是單色的，而且沒有報錯提示（vue有些情況下，語法很嚴格等等，有時不可以在旁邊加注釋不然會報錯。有時空格都會導致報錯，比如Missing space before function parentheses（函數(shù)括號前缺少空格）等等。

記得注釋掉.eslintrc.js文件中的'standard'（我暫時用這種方法解決一些空格等引發(fā)報錯的縮進等問題），不然注釋和空格等等都會引發(fā)錯誤（比如

error Expected indentation of 2 spaces but found 4 ，這個錯誤其實是縮進問題，意思是代碼規(guī)范本來是兩個空格，結(jié)果卻發(fā)現(xiàn)了4個。）

之所以會產(chǎn)生這個問題，是因為創(chuàng)建項目時使用eslint嚴格模式。這個模式會要求開發(fā)者的代碼必須按照嚴格模式的規(guī)范編寫，如果有空格或者縮進不規(guī)范，就會報錯。

例子2：實現(xiàn)vue的路由配置，界面跳轉(zhuǎn)（也就是組件切換功能）。

remote

Signed

ESLint被禁用等的報錯的解決方法：

ESLint 是一個開源的 JavaScript 代碼檢查工具。它可以幫助我們?nèi)z查js代碼中可能潛在的問題,并且有利于形成良好的編碼習慣。無論你是不是初學者都應(yīng)該盡早去使用它。

Login.vue

Reg.vue

index.js

視頻學習截圖：

params傳參時，地址欄看不到參數(shù)的內(nèi)容，相當于post傳參，而query可以在地址欄中看到傳過來的參數(shù)信息，所以一般我都喜歡用params傳參

使用 Vue 開發(fā)時，我認為可以提高開發(fā)效率的好的VS Code 插件的安裝方法

查看自己VScode版本的方法

例子1：安裝vue

vuejs項目：

html項目：引入腳本庫文件

單頁面開發(fā)：使用腳手架，vuejs全家桶

搭建vuejs的環(huán)境

路由跳轉(zhuǎn)的幾種方式

npm?install?--global?vue-cli
全局安裝vue腳手架

vue init webpack my_vue_project創(chuàng)建一個自定義名為my_vue_project的文件夾，項目的所有文件都在my_vue_project文件夾下

解決無法加載文件 D:\nodejs\node_global\webpack.ps1，因為在此系統(tǒng)上禁止運行腳本，有關(guān)詳細信息，請參閱 https:/go.microsoft.com/fwlink/?LinkID=135170的方法：

在 Vs Code 終端輸入 vue init webpack app， 創(chuàng)建一個名為 app 的 Vue 項目時報錯如下：

無法加載文件 D:\nodejs\node_global\webpack.ps1，因為在此系統(tǒng)上禁止運行腳本，有關(guān)詳細信息，請參閱 https:/go.microsoft.com/fwlink/?LinkID=135170

解決報錯：

（1）以管理員身份運行vs code

（2）在終端執(zhí)行：get-ExecutionPolicy，顯示Restricted（表示狀態(tài)是禁止的）

（3）在終端執(zhí)行：set-ExecutionPolicy RemoteSigned

（4）在終端執(zhí)行：get-ExecutionPolicy，顯示RemoteSigned

此時再使用“vue init webpack 項目名稱”創(chuàng)建項目，不會報錯

如下：

“Setup unit tests”: 是否安裝單元測試。由于我們現(xiàn)在還沒有單元測試，所以這里選擇的是”N”，而不是直接回車

“Setup e2e tests with Nightwatch”：是否安裝e2e測試，這里也同樣選擇的是“N”

cd my_vue_project（跳轉(zhuǎn)到my_vue_project項目文件夾），回車鍵后，輸入?npm run dev，再按回車鍵

http://localhost:8080

記得安裝Vetur，Vetur 支持.vue文件的語法高亮顯示，除了支持template模板以外，還支持大多數(shù)主流的前端開發(fā)腳本和插件，比如 Sass 和 TypeScript。如果不安裝Vetur，vue文件在VScode中就是單色的，而且沒有報錯提示（vue有些情況下，語法很嚴格等等，有時不可以在旁邊加注釋不然會報錯。有時空格都會導致報錯，比如Missing space before function parentheses（函數(shù)括號前缺少空格）等等。

【暫時不管下面的內(nèi)容：

npm run build

（完成之后，項目文件夾中會出現(xiàn)一個dist文件夾，里面就是打包之后的內(nèi)容，直接部署就好了。）

】

以上是個人的嘗試，也可查看如下內(nèi)容：

打開你創(chuàng)建的工程目錄，可以看到新文件夾mypro。

build 文件夾中的webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三個webpack的配置文件，分別是基本webpack配置、開發(fā)環(huán)境配置、生產(chǎn)環(huán)境配置

config文件夾中的index.js文件進行配置代理服務(wù)器，打開index.js 找到“proxyTable“這個屬性，然后在里面加上對應(yīng)的后臺地址即可，

?src文件夾

“assets”: 共用的樣式、圖片

“components”: 業(yè)務(wù)代碼存放的地方，里面分成一個個組件存放，一個頁面是一個組件，一個頁面里面還會包著很多組件

“router”: 設(shè)置路由

“App.vue”: vue文件入口界面

“main.js：對應(yīng)App.vue 創(chuàng)建vue實例，也是入口文件，對應(yīng)webpack.base.config.js里的入口配置

個人理解VScode中的界面跳轉(zhuǎn)就是在同一個界面中進行組件切換

例子2：實現(xiàn)vue的路由配置，界面跳轉(zhuǎn)（也就是組件切換功能）。

npm install --global vue-cli

（1）以管理員身份運行vs code

（2）在終端執(zhí)行：get-ExecutionPolicy，顯示Restricted（表示狀態(tài)是禁止的）

（3）在終端執(zhí)行：set-ExecutionPolicy RemoteSigned

（4）在終端執(zhí)行：get-ExecutionPolicy，顯示RemoteSigned

remote

Signed

vue init webpack my_vue_project

cd?my_vue_project（跳轉(zhuǎn)到my_vue_project項目文件夾），回車鍵后，輸入?npm run dev，再按回車鍵

http://localhost:8080

記得注釋掉.eslintrc.js文件中的'standard'（我暫時用這種方法解決一些空格等引發(fā)報錯的縮進等問題），不然注釋和空格等等都會引發(fā)錯誤（比如

error Expected indentation of 2 spaces but found 4 ，這個錯誤其實是縮進問題，意思是代碼規(guī)范本來是兩個空格，結(jié)果卻發(fā)現(xiàn)了4個。）

之所以會產(chǎn)生這個問題，是因為創(chuàng)建項目時使用eslint嚴格模式。這個模式會要求開發(fā)者的代碼必須按照嚴格模式的規(guī)范編寫，如果有空格或者縮進不規(guī)范，就會報錯。

推薦文章：https://blog.csdn.net/hailongcsdn/article/details/107072032

ESLint被禁用等的報錯的解決方法：

ESLint 是一個開源的 JavaScript 代碼檢查工具。它可以幫助我們?nèi)z查js代碼中可能潛在的問題,并且有利于形成良好的編碼習慣。無論你是不是初學者都應(yīng)該盡早去使用它。

ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.

ESLint被禁用，因為其執(zhí)行尚未被批準或拒絕。使用燈泡菜單打開批準對話框。

Login.vue

<template>

????<div>

????????<h1>登錄頁面</h1>

????????<!--?組件切換方式一?-->

????????<router-link?:to="{name:'Reg',params:{act:?'張三'}}">注冊</router-link>

????????<!--?組件跳轉(zhuǎn)方式二?-->

????????<input?type="button"?value="跳轉(zhuǎn)到注冊"

????????????@click="navi();"?/>

????</div>

</template>

<script>

export?default?{

????methods:?{

????//????點擊事件綁定的函數(shù)

????????navi:?function(){

????????????//this.$router.push('/reg');

????????????//query傳參數(shù)時，地址欄中可以看到傳過來的參數(shù)信息

????????????//this.$router.push({path:?'/reg',query:?{title:?'測試標題'}});

????????????//params傳參數(shù)時，地址欄中看不到參數(shù)的內(nèi)容,相當于post提交

????????????this.$router.push({name:?'Reg',params:?{flag:?'abc'}});

????????}

????}

}

</script>

Reg.vue

<template>

????<div>

????????<h1>注冊頁面</h1>?

????????<h1>傳過來的賬號是：{{this.$route.params.act}}</h1>

????????<h1>{{this.$route.query.title}}</h1>

????????<h1>{{this.$route.params.flag}}</h1>

????????<router-link?:to="{name:?'Login'}">登錄</router-link>??????

????</div>

</template>

index.js

import?Vue?from?'vue'

import?Router?from?'vue-router'

import?HelloWorld?from?'@/components/HelloWorld'

//自己加的代碼?START

import?Login?from?'@/components/Login'//——>導入Login.vue這個文件

import?Reg?from?'@/components/Reg'//——>導入Reg.vue這個文件

//自己加的代碼?END

Vue.use(Router)

export?default?new?Router({

??routes:?[

????{

??????path:?'/',

??????name:?'HelloWorld',

??????component:?HelloWorld

????}

????//自己加的代碼（設(shè)置跳轉(zhuǎn)路徑和對應(yīng)路徑中會使用的組件）?START

????,

????{//設(shè)置訪問跳轉(zhuǎn)路徑http://localhost:8080/#/lg時會調(diào)用Login.vue組件

??????path:?'/lg',

??????name:?'Login',//路由跳轉(zhuǎn)時使用

??????component:?Login

????},

????{//設(shè)置訪問跳轉(zhuǎn)路徑http://localhost:8080/#/reg時會調(diào)用reg.vue組件

??????path:?'/reg',

??????name:?'Reg',//路由跳轉(zhuǎn)時使用

??????component:?Reg

????}

????//自己加的代碼?END

??]

})

運行

http://localhost:8080

http://localhost:8080/#/lg

http://localhost:8080/#/reg

http://localhost:8080/#/lg

視頻學習截圖：

params傳參時，地址欄看不到參數(shù)的內(nèi)容，相當于post傳參，而query可以在地址欄中看到傳過來的參數(shù)信息，所以一般我都喜歡用params傳參

使用 Vue 開發(fā)時，我認為可以提高開發(fā)效率的好的VS Code 插件的安裝方法

其實你可以把VScode推薦的插件都下載：

Vetur（這個讓vue文件顏色不單調(diào)，而且提示報錯等等，個人認為不錯）

Vetur 支持.vue文件的語法高亮顯示，除了支持template模板以外，還支持大多數(shù)主流的前端開發(fā)腳本和插件，比如 Sass 和 TypeScript

ESLint（我暫時沒有體會到其好處）

大多數(shù)開發(fā)人員都熟悉 ESLint，這是最流行的linter工具之一，它可以幫助我們保持代碼與最佳實踐一致，并在大型代碼庫中具有可讀性。

VueJS有自己的ESLint插件來檢查單個文件組件的語法。我認為它是編寫可維護和可伸縮代碼的最佳工具之一。

沒有什么比看一些舊代碼甚至不知道從哪里開始調(diào)試更糟糕的了。

不用擔心！

ESLint可以幫助你保持組織性，并且隨著對Vue3的支持的增加，你可以編寫可擴展的Vue項目。

Vue VSCode Snippets（暫時體會不到其好處，下了也沒事，體積應(yīng)該也不大）

這個插件基于最新的Vue官方語法高亮文件添加了語法高亮，并且依據(jù)Vue 2的API添加了代碼片段。

它非常適合編寫快速SFC，Vue指令和快速訪問生命周期掛鉤之類的東西。

Bookmarks（書簽一樣的插件，好用。當然CTRL+F等等的使用也很方便）

許多VSCode插件只有在大型項目時才真正展現(xiàn)出其全部潛力。

Bookmarks 可以讓我們在代碼中標記和命名位置。然后，可以在這些不同的書簽之間跳轉(zhuǎn)來提高我們的開發(fā)速度。

為了找到某個特性，我們需要小心翼翼地上下滾動我們的文件，這樣的日子一去不復返了。

Bracket Pair Colorizer（我喜歡這種插件?。?/p>

Bracket Pair Colorizer 為代碼中的括號添上一抹亮色。我也非常喜歡這種視覺效果–讓代碼豐富多彩，而又不會讓人分心。

Auto Rename Tag（個人認為目前這個插件還行吧）

自動關(guān)閉標簽，在開始標記的結(jié)束括號中鍵入后，將自動插入結(jié)束標記。

每當我們要更改HTML括號對中的一個標簽（開始或結(jié)束標簽）時，Auto Rename Tag會自動重命名另一個標簽。

這個小的優(yōu)化可以幫助防止很多錯誤，特別是在處理大型模板時.。

NPM Intellisense（我喜歡這個插件）

在導入包時，NPM Intellisense都會自動完成我們的npm模塊。

這樣可以節(jié)省我們記住npm模塊確切名稱的時間。

Vue 2 Snippets

推薦的我認為寫得好的文章：https://mp.weixin.qq.com/s?src=11&timestamp=1620890406&ver=3065&signature=129P-YaRWoKi0KltJqsjsjhXHsyyIP1g5fVqEj3s4LPPQ0NpNWQV6OGV2bHJtVmNJFpR7-bl0xirmowBKuvpU2xGdwCB6zlfdjV2ER0cnb5JQMBGaMnpKGo1iPEMGEkK&new=1

查看自己VScode版本的方法：