一、開發(fā)工具
Visual Studio Code
二宣吱、環(huán)境搭建
- vue推薦開發(fā)環(huán)境:
Node.js: javascript運行環(huán)境(runtime),不同系統(tǒng)直接運行各種編程語言
npm: Nodejs下的包管理器窃这。由于國內(nèi)使用npm會很慢,這里推薦使用淘寶NPM鏡像（http://npm.taobao.org/）
$ npm install -g cnpm –registry=https://registry.npm.taobao.org
webpack: 它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準備，比如資源的合并和打包凌节。
vue-cli: 用戶生成Vue工程模板 - 安裝node.js
官網(wǎng)：http://nodejs.cn/
從node.js官網(wǎng)下載并安裝node钦听，安裝過程很簡單，一路“下一步”就可以了倍奢。
安裝完成之后朴上，打開命令行工具，輸入 node -v卒煞，如果出現(xiàn)相應(yīng)的版本號痪宰，則說明安裝成功。
-
npm包管理器畔裕，是集成在node中的衣撬，所以，直接輸入 npm -v扮饶，顯示出npm的版本信息具练。
npm
查看全局包位置：
C:\Users\Administrator>npm root -g
查看包的依賴關(guān)系 ：
C:\Users\Administrator>npm view npm dependencies
查看npm基本配置命令：
C:\Users\Administrator>npm config list
- 安裝cnpm(可選)
由于有些npm有些資源被屏蔽或者是國外資源的原因，經(jīng)常會導致用npm安裝依賴包的時候失敗甜无，所有我還需要npm的國內(nèi)鏡像—cnpm扛点。
在命令行中輸入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然后等待哥遮，安裝完成如下。
完成之后陵究，我們就可以用cnpm代替npm來安裝依賴包了眠饮。
- 安裝vue-cli腳手架構(gòu)建工具
在命令行中運行命令 npm install -g vue-cli ，然后等待安裝完成铜邮。
# 全局安裝vue-cli
C:\Users\Administrator>npm install -g vue-cli
或：
C:\Users\Administrator>npm install --global vue-cli
- 用vue-cli構(gòu)建項目
要創(chuàng)建項目仪召，首先我們要選定目錄，然后再命令行中把目錄轉(zhuǎn)到選定的目錄松蒜。
# 建一個基于 webpack 模板的新項目
Webpack為構(gòu)建扔茅，vue-project為項目名
D:\>vue init webpack vue-project
如果出現(xiàn)亂碼請改變命令行窗口編碼格式：
D:>chcp 65001
解釋一下這個命令，這個命令的意思是初始化一個項目牍鞠，其中webpack是構(gòu)建工具咖摹，也就是整個項目是基于webpack的评姨。其中vue-project是整個項目文件夾的名稱难述，這個文件夾會自動生成在你指定的目錄中:
D:\>cd vue-project
D:\vue-project>
-
安裝項目所需的依賴
要安裝依賴包，首先cd到項目文件夾（vue-project文件夾）吐句，然后運行命令 cnpm install 胁后，等待安裝。
安裝項目所需的依賴
安裝完成之后嗦枢，會在我們的項目目錄vue-project文件夾中多出一個node_modules文件夾攀芯，這里邊就是我們項目需要的依賴包資源。
-
運行項目
在項目目錄中文虏，運行命令 npm run dev 侣诺，會用熱加載的方式運行我們的應(yīng)用，熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果氧秘。
運行項目
這里簡單介紹下 npm run dev 命令年鸳，其中的“run”對應(yīng)的是package.json文件中，scripts字段中的dev丸相，也就是 node build/dev-server.js命令的一個快捷方式搔确。
項目運行成功后，瀏覽器會自動打開localhost:8080（如果瀏覽器沒有自動打開灭忠，可以手動輸入）膳算。運行成功后，會看到如下所示的界面弛作。
三涕蜂、安裝配置vscode
-
VSCode設(shè)置中文語言環(huán)境
使用快捷鍵【Ctrl+Shift+P】
在彈出的搜索框中輸入【configure language】，然后選擇搜索出來的【Configure Display Language】,如下圖：
設(shè)置語言環(huán)境
設(shè)置語言環(huán)境
安裝簡體中文 -
Visual Studio Code編輯器在Windows上安裝比較簡單映琳，直接setup.exe机隙。安裝好后首次啟動配置插件瘦真，插件配置必須聯(lián)網(wǎng)，從網(wǎng)上下載黍瞧。如下圖點擊左側(cè)擴展：
擴展 配置
文件->首選項->設(shè)置
{
"workbench.iconTheme": "vscode-icons",
"editor.fontSize": 20,
"editor.renderIndentGuides": false,
"files.autoSave": "afterDelay",
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
{
"extensionName": ".min.css",
"format": "compressed",
"savePath": "/css"
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"easysass.formats": [
{
"format": "expanded",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
}
],
"easysass.targetDir": "./css/",
"background.customImages": [
"file:///D://222.png"
],
"background.useDefault": false,
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"z-index": "99999",
"width": "102%",
"height": "100%",
"background-position": "0%",
"background-repeat": "no-repeat",
"opacity": 0.3
},
"editor.quickSuggestions": {
"strings": true
},
"cssrem.rootFontSize": 12,
"cssrem.autoRemovePrefixZero": false,
"cssrem.fixedDigits": 3,
"beautify.language": {
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss"
],
"html": [
"htm",
"vue",
"html"
]
},
"workbench.colorTheme": "Dark-Dracula",
"vetur.format.defaultFormatter.html": "js-beautify-html"
}
二诸尽、Vue-cli 項目目錄解析
|-- build // 項目構(gòu)建(webpack)相關(guān)代碼
| |-- build.js // 生產(chǎn)環(huán)境構(gòu)建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- dev-client.js // 熱重載相關(guān)
| |-- dev-server.js // 構(gòu)建本地服務(wù)器
| |-- utils.js // 構(gòu)建工具相關(guān)
| |-- webpack.base.conf.js // webpack基礎(chǔ)配置
| |-- webpack.dev.conf.js // webpack開發(fā)環(huán)境配置
| |-- webpack.prod.conf.js // webpack生產(chǎn)環(huán)境配置
|-- config // 項目開發(fā)環(huán)境配置
| |-- dev.env.js // 開發(fā)環(huán)境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產(chǎn)環(huán)境變量
| |-- test.env.js // 測試環(huán)境變量
|-- src // 源碼目錄
| |-- assets // 資源目錄
| |-- components // vue公共組件
| |-- store // vuex的狀態(tài)管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件印颤，加載各種公共組件
|-- static // 靜態(tài)文件您机，比如一些圖片，json數(shù)據(jù)等
| |-- data // 數(shù)據(jù)
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
| |-- .postcssrc.js // 通過JS插件裝換樣式的工具
|-- README.md // 項目說明
|-- favicon.ico
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
三年局、常見問題
-
Eslint總是報錯‘[vue/no-parsing-error] Parsing error: x-invalid-end-tag.’
關(guān)閉eslint的檢查
Eslint總是報錯
vetur.validation.template
解決方法
常見錯誤：
- ! chromedriver@2.46.0 install:
node install.js
D:\vue-project> npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
