前言
安裝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的環境搭建。最后達到可以創建項目運行項目的目的。然后可以通過修改路由來顯示登錄頁面。這一篇算是比較完善完整的基礎入門篇了。
永遠都不要停止微笑，即使是在你難過的時候，說不定哪一天有人會因為你的笑容面愛上你。
歡迎大家掃描下方二維碼，和我一起學習更多的知識
回復"代理"即可獲得
Shadowrocket代理工具
回復"服務器"即可獲得
SS/SSR免費賬號
