Vue建立專案配置
前言
安裝VS Code，開始vue的學習及程式設計，但是總是遇到各種各樣的錯誤，控制檯語法錯誤，格式錯誤。一股腦的襲來，感覺建立個專案怎麼這個麻煩。這裡就講一下vue的安裝及建立。
安裝環境
當然第一步還是先下載VS Code咯。然後傻瓜式的安裝一步接一步的進行下去就完事。然後開啟進入VS Code，這裡會提醒你，有些配置可能需要重啟之後才會生效，這個看你個人的安排。也可以最後進行重啟。
一、中文語言環境安裝
1、使用快捷鍵組合【Ctrl+Shift+p】，在搜尋框中輸入“configure display language”，點選確定後選擇zh-cn.
2、如果沒有zh-cn選項，我們就【Ctrl+Shift+X】開啟擴充套件視窗搜尋Chinese進行安裝。
3、在返回搜尋框去設定，然後重啟VS Code
二、vetur外掛的安裝
這個外掛是vue檔案基本語法高亮顯示的外掛。點選【Ctrl+Shift+X】開啟外掛擴充套件視窗搜尋vetur進行安裝。安裝完成之後需要在配置檔案中進行配置。
檔案=>首選項=>設定=>常用設定=>settings.json中新增一下配置。
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
三、eslint外掛的安裝
Eslint 是一個智慧錯誤檢測的外掛，這個外掛在實際開發中可能會發揮極其很重要的作用。能夠幫我們及時的發現錯誤。按照上面哪一步去外掛擴充套件視窗搜尋eslint進行安裝，然後在相同的位置進行配置。
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
}
最終兩個外掛安裝完成之後配置如下。
開始建立專案
想要學好vue，那麼npm命令是必不可少的。
一、安裝node.js
Vue,npm都是基於node.js的，所以這裡我們先安裝node.js
進入node.js官網，點選下載windows版本的。
然後根據步驟一步步安裝就行了。然後開啟CMD命令視窗進行檢查。
Node -v Npm -v
分別檢查node的版本及npm的版本
二、安裝Vue.js
安裝vue這裡我們使用NPM方法進行安裝，開啟命令列視窗。
安裝最新穩定版本vue
npm install vue
全域性安裝 vue-cli
npm install --global vue-cli
到這裡我們基本環節配置差不多就ok了。
接下來呢我們就可以開始建立專案了。
三、建立專案
1、首先我們建立一個資料夾(VueWeb)用來專門存放我們的vue專案。
2、開啟命令列視窗或者VS Code的終端，然後定位到剛建立的資料夾下。
3、然後使用vue init webpack myweb命令開始建立專案。
? Project name (myweb) vue ---------------------專案名稱，這裡注意是不允許出現大寫字母的。
? Project description (A Vue.js project) myweb ---------------------專案描述
? Author super --------------------- 專案建立者
? Vue build (Use arrow keys) 直接回車 出現 ? Vue build standalone
? Install vue-router? (Y/n) Yes --------------------- 是否安裝Vue路由，通過路由控制頁面跳轉
? Use ESLint to lint your code? (Y/n) No ---------------------是否啟用eslint檢測規則，這裡我建議選擇No，不然後面會出現各種語法不同的問題，讓我有點不適應。
? Setup unit tests? (Y/n) Yes ---------------------是否安裝程式的單元測試
? Pick a test runner? 回車預設 ---------------------選擇一個測試工具
? Setup e2e tests with Nightwatch? (Y/n) Yes------------ 是否使用npm進行安裝剛剛的配置
然後等待完畢，我們就可以開啟VS Code然後開啟剛剛我們建立的Vue專案。
四、 執行專案
開啟剛剛建立的Vue專案終端後，我們就可以進行執行專案前的最後幾步了。
1、執行npm install命令進行相關依賴的安裝。
2、然後使用 npm run dev執行專案，接下來就出現了一個網址，我們點選訪問就是我們剛剛建立的專案了。
3、現在我們繼續對專案進行修改，建立一個Login登入頁面。
4、在src目錄下新建Login資料夾及Login.vue檔案並新增程式碼（這裡注意主體程式碼和style和script中間是需要空一行的）
<template>
<div>
<div class="login-wrap" v-show="showLogin">
<h3>登入</h3>
<p v-show="showTishi">{{tishi}}</p>
<input type="text" placeholder="請輸入使用者名稱" v-model="username">
<input type="password" placeholder="請輸入密碼" v-model="password">
<button v-on:click="login">登入</button>
<span v-on:click="ToRegister">沒有賬號？馬上註冊</span>
</div>
<div class="register-wrap" v-show="showRegister">
<h3>註冊</h3>
<p v-show="showTishi">{{tishi}}</p>
<input type="text" placeholder="請輸入使用者名稱" v-model="newUsername">
<input type="password" placeholder="請輸入密碼" v-model="newPassword">
<button v-on:click="register">註冊</button>
<span v-on:click="ToLogin">已有賬號？馬上登入</span>
</div>
</div>
</template>
<style>
.login-wrap{text-align:center;}
input{display:block; width:250px; height:40px; line-height:40px; margin:0 auto; margin-bottom: 10px; outline:none; border:1px solid #888; padding:10px; box-sizing:border-box;}
p{color:red;}
button{display:block; width:250px; height:40px; line-height: 40px; margin:0 auto; border:none; background-color:#41b883; color:#fff; font-size:16px; margin-bottom:5px;}
span{cursor:pointer;}
span:hover{color:#41b883;}
</style>
<script>
export default{
data () {
return {
showLogin: true,
showRegister: false,
showTishi: false,
tishi: '',
username: '',
password: '',
newUsername: '',
newPassword: ''
}
}
}
</script>
5、然後修改router路由檔案下的index.js
新增
import Login from '@/Login/Login'
修改routes：
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
}
]
6、執行專案 npm run dev
總結
本篇文章主要講述VS Code 安裝及環境的搭建，還有vue及node.js的環境搭建。最後達到可以建立專案執行專案的目的。然後可以通過修改路由來顯示登入頁面。這一篇算是比較完善完整的基礎入門篇了。
永遠都不要停止微笑，即使是在你難過的時候，說不定哪一天有人會因為你的笑容面愛上你。
歡迎大家掃描下方二維碼，和我一起學習更多的知識
&n