Vue創(chuàng)建項(xiàng)目總結(jié)
一腔彰、如何創(chuàng)建一個(gè)VueDemo項(xiàng)目
-
為了更好的管理使用vue框架創(chuàng)建項(xiàng)目生兆，需要在全局中安裝vue-cli
npm install --global vue-cli //工具將被安裝到當(dāng)前使用的node版本的mode_modules下
vue-V //查看是否安裝成功,如果安裝成功會(huì)出現(xiàn)當(dāng)前vue-cli的版本
-
vue-cli是什么七蜘？（腳手架工具）
- vue-cli是vue命令行工具，需要安裝它才能直接通過vue命令來操作其他的操作
- 如：vue init <template-name> <project-name>
- vue init webpack dirname
-
vue-cli的作用：
目錄結(jié)構(gòu)
本地測試
單元測試
熱加載
-
代碼部署
?
-
使用github上提供的模板快速創(chuàng)建vue項(xiàng)目
github上提供了5種不同結(jié)構(gòu)的單頁面模板，根據(jù)情況選擇使用
可以使用vue list 查看模板的名稱
vue init webpack helloworld //vue init為固定的開始牍疏，后面的webpack為要?jiǎng)?chuàng)建的模板杖剪，helloworld為項(xiàng)目文件夾名稱
此時(shí)會(huì)下載template Project name //項(xiàng)目名 Project description //項(xiàng)目描述 Author //作者 Vue build //構(gòu)建項(xiàng)目 1.運(yùn)行+編譯（官方推薦） //選擇第一項(xiàng) 2.僅運(yùn)行時(shí) Install vue-router?(Y/n) //如果需要路由就Y冻押，不需要就n //Y Use ESLint to lint your code? (Y/n) //是否使用ESLint管理代碼 //n Setup unit tests with Karma + Mocha? (Y/n) //是否安裝單元測試驰贷，我選擇n Setup e2e tests with Nightwatch(Y/n)? //是否安裝e2e測試 ，我選擇n 此時(shí)模板已經(jīng)下載到電腦了翼雀，你會(huì)在cmd中看見如下信息 To get started： //叫你馬上開始的意思 cd helloworld //進(jìn)入項(xiàng)目文件夾 npm install //使用npm 安裝 如果安裝了cnpm,也可以使用cnpm, npm run dev //在瀏覽器運(yùn)行 這一步必須要在npm run dev 之前執(zhí)行 cnpm install --production //安裝生產(chǎn)依賴饱苟，即package.json文件里面的dependencies 即： "dependencies": { "vue": "^2.3.3", "vue-router": "^2.6.0" },
- 在安裝vue-cli的時(shí)候出現(xiàn)的警告
npm-install-vue-cli-g.png
出現(xiàn)如圖警告的原因：
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2(node_modules\vue-cli\node_modules\fsevents): //跳過可選的依賴
原因是我的系統(tǒng)不支持fsevents包，fsevents包需要在MaxOSX的環(huán)境下才能使用
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os" : "darwin","arch" : "any"} (current: {"os":"win32","arch":"x64"})
“os”代表系統(tǒng)類型狼渊，darwin是蘋果系統(tǒng)包含的一部分
“arch”代碼系統(tǒng)的架構(gòu)箱熬，我當(dāng)前使用的是win32位，基于x64處理器
二狈邑、目錄結(jié)構(gòu)分析
vue-dir.png
- 如下的目錄有些是臨時(shí)加上去的城须，如果圖片上沒有可以忽略（一級(jí)目錄）
|-- build // 項(xiàng)目構(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 // 項(xiàng)目開發(fā)環(huán)境配置
| |-- dev.env.js // 開發(fā)環(huán)境變量
| |-- index.js // 項(xiàng)目一些配置變量
| |-- prod.env.js // 生產(chǎn)環(huán)境變量
| |-- test.env.js // 測試環(huán)境變量
|-- src // 源碼目錄
| |-- components // vue公共組件
| |-- store // vuex的狀態(tài)管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件米苹，加載各種公共組件
|-- static // 靜態(tài)文件糕伐，比如一些圖片，json數(shù)據(jù)等
| |-- data // 群聊分析得到的數(shù)據(jù)用于數(shù)據(jù)可視化
|-- .babelrc // ES6語法編譯配置,里面有一些插件蘸嘶，這些插件的作用是代碼的轉(zhuǎn)換
|-- .editorconfig // 編譯器的配置,定義代碼格式
|-- .eslintignore //忽略語法檢查的目錄文件
|-- .eslintrc.js //編譯規(guī)則配置文件良瞧，規(guī)則定制文件，規(guī)則編譯不過的時(shí)候可以在這里配置為0
|-- .gitignore // git上傳需要忽略的文件格式,
|-- favicon.ico // link圖標(biāo)
|--.postcssrc.js
|-- index.html // 入口頁面
|-- package.json // 項(xiàng)目基本信息如：可以配置script腳本 ^上箭頭代表可以安裝當(dāng)前版本及以上的版本
|-- README.md // 項(xiàng)目說明
三训唱、使用ESLint管理代碼
-
出現(xiàn)錯(cuò)誤:semi
- semi Missing semicolon //缺少分號(hào)
- missing ['m?s??] 缺少
- semicolon[sem?'k??l?n] 分號(hào)
- 解決問題：在項(xiàng)目的根目錄下找.eslintrc.js文件褥蚯，打開后在rules屬性中設(shè)置規(guī)則
'rules' : { 'arrow-parens': 0, //允許less箭頭功能 'generator-star-spacing': 0, 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 'semi' : ['error', 'always'] //設(shè)置這行規(guī)則（沒有分號(hào)就報(bào)錯(cuò)） }?
?
-
格式化代碼都出現(xiàn)的錯(cuò)誤：indent
- 連接：eslint.org/docs/rules/indent
- 解決問題：在項(xiàng)目的根目錄下找.eslintrc.js文件，打開后在rules屬性中設(shè)置規(guī)則
'rules' : { 'semi' : ['error', 'always'], // 設(shè)置分號(hào)結(jié)尾 'indent' : 0 //設(shè)置這行規(guī)則（空格還是縮進(jìn)） }
-
錯(cuò)誤：no-multiple-empty-lines
- 在script標(biāo)簽中刪除所有的空行
//不正確的 <script> </script> //正確的 <script> </script>
- 錯(cuò)誤：no-new
/* eslint-disable no-new */ //跳過校驗(yàn) no-new 規(guī)則
new Vue({
el : "#body",
components : {App} //使用一個(gè)組件
});
四况增、package.json文件
1.package.json
{
"name": "vue1",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
},
"dependencies": { //生產(chǎn)依賴
"vue": "^2.3.3",
"vue-router": "^2.6.0"
},
"devDependencies": { //開發(fā)依賴
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.2.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
2.dependencies與devDependencies
- dependencies生產(chǎn)時(shí)需要的依賴
- devDependencies開發(fā)時(shí)需要的依賴
- 運(yùn)行npm install命令赞庶，會(huì)自動(dòng)安裝dependencies和devDependencies字段中的模塊
3.script 字段
- script字段是用來指定npm相關(guān)命令的縮寫的
- 如在命令行中運(yùn)行
npm run dev就相當(dāng)于在執(zhí)行node build/dev-server.js
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
}
