您好,登錄后才能下訂單哦!
準(zhǔn)備工作
1.判斷是否需要FQ或安裝鏡像,鏡像一般可安裝國內(nèi)淘寶鏡像,詳情可看這里:cnpm
npm install -g cnpm --registry="cnpm"
全局安裝淘寶cnpm。
2.開發(fā)工具選擇很多,VUE無專用開發(fā)工具,開發(fā)項目多以SPA形式體現(xiàn),本例使用 Visual Studio Code。
3.調(diào)試工具選擇很多,官方推薦 vue-devtools 。
安裝方法:FQ或者github主頁。https://github.com/vuejs/vue-devtools下載壓縮包,解壓到Chrome擴展程序。
環(huán)境搭建
1.安裝 Node.js 10.15.3, npm包管理工具(高版本node.js自帶npm)。
安裝完成后,DOS命令行輸入命令檢查安裝情況npm -v,出現(xiàn)npm版本號即可。
下載地址https://nodejs.org/en/download/
2.全局安裝 vue-cli腳手架
DOS命令行安裝(-g 參數(shù)表示安裝至 npm 工作路徑,以后任意位置均可訪問)
npm install -g vue-cli
3.安裝 開發(fā)工具 Visual Studio Code
1.下載地址 https://code.visualstudio.com/Download
注意 User Installer / System Installer 不同(建議安裝系統(tǒng)版本)
2.安裝 Vetur ,vue 2 snippets插件
文件 -> 首選項 -> 擴展 -> 搜索 -> 輸入 Vetur/vue 2 snippets -> 安裝
3.安裝 語言包(視個人喜好)
文件 -> 首選項 -> 擴展 -> 搜索 -> 輸入 Chinese(Simplified)... -> 安裝
4.打開文件夾... 開發(fā)已存在項目
4.安裝 vue-devtools。
1.下載 https://github.com/vuejs/vue-devtools
2.DOS 命令進入解壓后目錄
修改 \shells\chrome\manifest.json中 background 節(jié)點 persistent 值為 true
3.運行 npm install
命令安裝依賴包。
進度條等待完成,大約5-15分鐘,必要使用cnpm
4.運行 npm run build
(一定要執(zhí)行這步,不然后面會報錯)
5.啟動 Google Chrome -> 輸入 chrome://extensions/ -〉確認(rèn)打開“開發(fā)者模式” -> 加載已解壓擴展程序 -> 選擇 shells\chrome 確定即可安裝
初始化項目
初始化項目有多種方式,建議采用 Webpack 模板模式
1.進入需要創(chuàng)建Vue項目文件夾,打開DOS命令行輸入:vue init webpack 項目名稱
2.然后終端會出現(xiàn)下圖“一問一答”模式
“Project name”:這個是項目名稱,默認(rèn)是輸入時的那個名稱,想改的話直接輸入修改,也可以直接回車
“Install vue-router”:是否需要vue-router,這里默認(rèn)選擇使用,這樣生成好的項目就會有相關(guān)的路由配置文件
“Use ESLint to lint your code”:是否使用ESLint,剛才說了我們這個項目需要使用所以也是直接回車,默認(rèn)使用,這樣會生成相關(guān)的ESLint配置
“Setup unit tests with Karma + Moch?”: 是否安裝單元測試。由于我們現(xiàn)在還沒有單元測試,所以這里選擇的是”N”
“Setup e2e tests with Nightwatch”:是否安裝e2e測試,這里我也同樣選擇的是“N”
3.下載依賴包
cd ‘項目文件' 終端執(zhí)行命令:npm install .這個過程會生成一個node_modules 文件夾
4.調(diào)試項目
終端輸入:npm run dev/start
5.打開Google Chrome ,默認(rèn)項目地址:localhost://8080,訪問即可。F12啟用開發(fā)者調(diào)試工具,調(diào)試菜單欄選擇 Vue
開發(fā)過程
1.相關(guān)文件說明
build和config >webpack配置相關(guān)文件
node_modules>項目需要的模板文件
src/main.js>入口js文件
src/assets>公共的樣式,圖片文件
src/components>各種vue組件文件
src/App.vue>頁面主組件
src/router>vue-router 路由配置文件
static>靜態(tài)資源文件(不會被webpack處理)
.eslintrc.js>eslint檢查配置文件
.editorconfig>代碼編輯環(huán)境配置文件
.eslintignore>eslint檢查忽略文件
.babelrc>babel編譯參數(shù)配置文件
index.html>主頁,項目入口文件
package.json>項目配置文件,描述項目信息和依賴
README.md>項目的說明文檔
2.新增組件
在 \src\components 目錄新建 vue 文件(每一個.vue文件都是一個單獨vue組件,用來實現(xiàn)頁面特定的功能界面,包括基本的骨架html+CSS+js)。例如 Hellovue.vue,vue文件代碼標(biāo)準(zhǔn)模板樣式如下:
<template> <div id="..."> 組件html模板 </div> </template> <style> css相關(guān)樣式 </style> <script> export default { //默認(rèn)向外暴露一個對象 name:'Hellovue', data () { return {};// data保存數(shù)據(jù)必須返回一個對象 } }; </script>
1.引入組件
1.在App.vue主文件中script標(biāo)簽添加import Hellovue form ./components/Hellovue.vue導(dǎo)入子組件。
2.組件模板對象添加components屬性。
3.重啟項目即可看到自己定義的組件。
4.新增頁面(利用vue路由實現(xiàn))在 \router\index.js 添加新增頁面路由
import Hellovue from '@/components/Hellovue' ... { path: '/Hellovue', name: 'Hellovue', component: Hellovue }
在App.vue主頁面掛載<router-link to='Hellovue'>
跳轉(zhuǎn)我的頁面</router-link>
即可
1.打包編譯
終端運行命令編譯
npm run build
即可產(chǎn)品dist文件,項目上線后只需把dist文件丟到服務(wù)器即可。ps:如果本地測試,則需修改webpack生產(chǎn)環(huán)境下的assetsPublicPath配置
注意事項:
1.最好使用cnpm代替npm安裝依賴,因為開發(fā)過程中少部分包如果用npm是無法下載完成,一直卡住,換為cnpm毫無壓力記得加上--save選項,否則別人安裝的話會缺少包.
2.路徑說明
‘/‘, 表示項目根目錄
‘./‘,表示當(dāng)前目錄
‘../‘ ,表示上一級目錄,可以連續(xù)多個,比如‘../../../‘表示往外層退3級目錄
3.所有組件的數(shù)據(jù)都必須放置在data函數(shù)返回的對象中,無論是否有數(shù)據(jù),否則會報錯。
4.一個template組件下只能有一個并列的div,否則報錯。
5.ESLint 格式問題
1.vue 創(chuàng)建項目時,ESLint 選擇啟用時候,因 ESLint 代碼檢查極其嚴(yán)格,縮進空格數(shù)量,尾部空行等皆在檢查之列,可以選擇關(guān)閉。
build/webpack.base.conf.js 注釋掉 module->rules 中 ESLint 規(guī)則,關(guān)閉代碼:
//...(config.dev.useEslint ? [createLintingRule()] : []),
規(guī)范起見,修改 .eslintrc.js 文件 rules 節(jié)點,關(guān)閉指定格式檢查。
例如'semi': ['off', 'always'], 需要分號的地方即錄入,否則 ESLint 強制檢查不錄入分號。說明參照https://eslint.org/docs/rules/semi。隨后重新 npm run dev 即可。完整說明參照https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md。或者在.eslintignore文件下配置相關(guān)忽略ESlint檢查的文件格式,如:*.js,eslint則默認(rèn)忽略根目錄下所有的js文件。
2.Tab Size 調(diào)整
多數(shù)開發(fā)工具 Tab Size 默認(rèn) 4,ESLint 默認(rèn) 2,需要將開發(fā)工具 Tab Size 默認(rèn)值調(diào)為2或關(guān)閉 ESLint
3.VUE 腳本結(jié)束標(biāo)志 </script> 或者.vue文件結(jié)尾</style>不能作為文件結(jié)尾,其后必須另起一行寫入其它代碼,必要時插入空行.
常見問題:
1.npm run dev 提示 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
not found module ‘xxx'
原因:依賴庫不完整
方案:項目所在目錄運行 npm install xxx -S 安裝相關(guān)依賴包,或按照如下指定安裝相關(guān)版本,npm install xx@版本號 -S。
2.安裝插件提示 npm WARN rollback Rolling back ...... failed (this is probably harmless): EPERM: operation not permitted
原因:npm 權(quán)限不足
方案:安裝所在目錄設(shè)置權(quán)限
npm config set user 0 npm config set unsafe-perm true
3.npm run build 后,打包生成的dist文件本地測試發(fā)現(xiàn)404錯誤。
原因:本地測試當(dāng)前文件默認(rèn)路徑以‘./'開頭,vue配置文件中默認(rèn)以‘/'開頭
方案:設(shè)置config/index.js中assetsPublicPath屬性值為‘./'
vue項目啟動原理
1.讀取 package.json 文件 scripts 內(nèi)部節(jié)點,例 start / build / dev 節(jié)點,根據(jù)節(jié)點值獲得相應(yīng)啟動參數(shù)
2.Webpack配置項目入口文件,出口文件名。
在.\build\webpack.base.conf.js文件配置入口文件module.exports.entry值即項目總?cè)肟?,默認(rèn)為 ./src/main.js。
在config/index.js文件中build對象assetsRoot中配置打包后文件名。
3../src/main.js。頁面入口js文件,實例化一個Vue,平且引入vue和主入口組件。componens和template屬性缺一不可。
new Vue({ el: '#app', router, components: { App }, // 定義組件映射 template: '<App/>' // 定義組件模板 })
1.打包項目提交到Svn或github注意不要提交node_modules文件夾,以免造成資源浪費
附件
1.幫助文檔
vuex狀態(tài)管理庫:https://vuex.vuejs.org/zh/guide/
vue中文網(wǎng):https://cn.vuejs.org/
vue-axioshttps://www.npmjs.com/package/vue-axios
vue-routerhttps://router.vuejs.org/zh/
webpack中文網(wǎng)https://www.webpackjs.com/
2.安裝 cnpm 淘寶鏡像避免FQ
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后安裝相關(guān)命令可用 cnpm 代替 npm。
淘寶鏡像包與原包存在一定差異,避免莫名其妙問題起見,盡量使用原包命令 npm 安裝,可以使用 hosts FQ模式。
3.依賴包出錯刪除重裝
刪除全局包
npm uninstall -g 包名
刪除本地包
npm uninstall 包名
不成功可以采用 remove 代替 uninstall
4.引用外部 js
引用外部 js 有全局引用、VUE 外部引用、VUE 內(nèi)部引用等多種方法
1.內(nèi)部引用
A. 安裝模塊至項目目錄(jQuery案例)
npm install jquery --save
B. 確認(rèn) package.json dependencies 節(jié)點已添加依賴
"jquery": "^3.3.1",
C. Vue 文件直接引用
import $ from 'jquery'
2.全局引用
A. 在package.json中添加依賴文件dependencies:{"jquery":"^2.2.1"}
//可以自己指定版本
B. 重新安裝項目依賴cnpm install
c. 在webpack.base.conf.js中module.exports中提供一個全局變量:$
總結(jié)
以上所述是小編給大家介紹的從零到一詳聊創(chuàng)建Vue工程及遇到的常見問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。