準(zhǔn)備工作

1.判斷是否需要FQ或安裝鏡像，鏡像一般可安裝國(guó)內(nèi)淘寶鏡像，詳情可看這里：cnpm

npm install -g cnpm --registry="cnpm"全局安裝淘寶cnpm。

2.開(kāi)發(fā)工具選擇很多，VUE無(wú)專用開(kāi)發(fā)工具，開(kāi)發(fā)項(xiàng)目多以SPA形式體現(xiàn)，本例使用 Visual Studio Code。

3.調(diào)試工具選擇很多，官方推薦 vue-devtools 。

安裝方法：FQ或者github主頁(yè)。https://github.com/vuejs/vue-devtools下載壓縮包，解壓到Chrome擴(kuò)展程序。

環(huán)境搭建

1.安裝 Node.js 10.15.3, npm包管理工具（高版本node.js自帶npm）。

安裝完成后，DOS命令行輸入命令檢查安裝情況npm -v,出現(xiàn)npm版本號(hào)即可。

 下載地址https://nodejs.org/en/download/

2.全局安裝 vue-cli腳手架

DOS命令行安裝(-g 參數(shù)表示安裝至 npm 工作路徑,以后任意位置均可訪問(wèn))

npm install -g vue-cli

3.安裝 開(kāi)發(fā)工具 Visual Studio Code

1.下載地址 https://code.visualstudio.com/Download

注意 User Installer / System Installer 不同（建議安裝系統(tǒng)版本）

2.安裝 Vetur ,vue 2 snippets插件

文件 -> 首選項(xiàng) -> 擴(kuò)展 -> 搜索 -> 輸入 Vetur/vue 2 snippets -> 安裝

3.安裝 語(yǔ)言包（視個(gè)人喜好）

文件 -> 首選項(xiàng) -> 擴(kuò)展 -> 搜索 -> 輸入 Chinese(Simplified)... -> 安裝

4.打開(kāi)文件夾... 開(kāi)發(fā)已存在項(xiàng)目

4.安裝 vue-devtools。

1.下載 https://github.com/vuejs/vue-devtools

2.DOS 命令進(jìn)入解壓后目錄

 修改 \shells\chrome\manifest.json中 background 節(jié)點(diǎn) persistent 值為 true

3.運(yùn)行 npm install 命令安裝依賴包。

進(jìn)度條等待完成，大約5-15分鐘，必要使用cnpm

4.運(yùn)行 npm run build(一定要執(zhí)行這步，不然后面會(huì)報(bào)錯(cuò))

5.啟動(dòng) Google Chrome -> 輸入 chrome://extensions/ -〉確認(rèn)打開(kāi)“開(kāi)發(fā)者模式” -> 加載已解壓擴(kuò)展程序 -> 選擇 shells\chrome 確定即可安裝

初始化項(xiàng)目

初始化項(xiàng)目有多種方式，建議采用 Webpack 模板模式

1.進(jìn)入需要?jiǎng)?chuàng)建Vue項(xiàng)目文件夾，打開(kāi)DOS命令行輸入：vue init webpack 項(xiàng)目名稱

2.然后終端會(huì)出現(xiàn)下圖“一問(wèn)一答”模式

“Project name”：這個(gè)是項(xiàng)目名稱，默認(rèn)是輸入時(shí)的那個(gè)名稱，想改的話直接輸入修改，也可以直接回車

“Install vue-router”:是否需要vue-router，這里默認(rèn)選擇使用，這樣生成好的項(xiàng)目就會(huì)有相關(guān)的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint，剛才說(shuō)了我們這個(gè)項(xiàng)目需要使用所以也是直接回車，默認(rèn)使用，這樣會(huì)生成相關(guān)的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安裝單元測(cè)試。由于我們現(xiàn)在還沒(méi)有單元測(cè)試，所以這里選擇的是”N”

“Setup e2e tests with Nightwatch”：是否安裝e2e測(cè)試，這里我也同樣選擇的是“N”

3.下載依賴包

cd ‘項(xiàng)目文件' 終端執(zhí)行命令：npm install .這個(gè)過(guò)程會(huì)生成一個(gè)node_modules 文件夾

4.調(diào)試項(xiàng)目

終端輸入：npm run dev/start

5.打開(kāi)Google Chrome ,默認(rèn)項(xiàng)目地址:localhost://8080,訪問(wèn)即可。F12啟用開(kāi)發(fā)者調(diào)試工具，調(diào)試菜單欄選擇 Vue

開(kāi)發(fā)過(guò)程

1.相關(guān)文件說(shuō)明

build和config >webpack配置相關(guān)文件

node_modules>項(xiàng)目需要的模板文件

src/main.js>入口js文件

src/assets>公共的樣式，圖片文件

src/components>各種vue組件文件

src/App.vue>頁(yè)面主組件

src/router>vue-router 路由配置文件

static>靜態(tài)資源文件（不會(huì)被webpack處理）

.eslintrc.js>eslint檢查配置文件

.editorconfig>代碼編輯環(huán)境配置文件

.eslintignore>eslint檢查忽略文件

.babelrc>babel編譯參數(shù)配置文件

index.html>主頁(yè)，項(xiàng)目入口文件

package.json>項(xiàng)目配置文件，描述項(xiàng)目信息和依賴

README.md>項(xiàng)目的說(shuō)明文檔

2.新增組件

在 \src\components 目錄新建 vue 文件(每一個(gè).vue文件都是一個(gè)單獨(dú)vue組件，用來(lái)實(shí)現(xiàn)頁(yè)面特定的功能界面，包括基本的骨架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)向外暴露一個(gè)對(duì)象
      name:'Hellovue',
      data () {
        return {};// data保存數(shù)據(jù)必須返回一個(gè)對(duì)象
      }
    };
    </script>

1.引入組件

1.在App.vue主文件中script標(biāo)簽添加import Hellovue form ./components/Hellovue.vue導(dǎo)入子組件。

2.組件模板對(duì)象添加components屬性。

3.重啟項(xiàng)目即可看到自己定義的組件。

4.新增頁(yè)面（利用vue路由實(shí)現(xiàn)）在 \router\index.js 添加新增頁(yè)面路由

import Hellovue from '@/components/Hellovue'
...
  {
   path: '/Hellovue',
   name: 'Hellovue',
   component: Hellovue
  }

在App.vue主頁(yè)面掛載<router-link to='Hellovue'>跳轉(zhuǎn)我的頁(yè)面</router-link>即可

1.打包編譯

終端運(yùn)行命令編譯

npm run build

即可產(chǎn)品dist文件，項(xiàng)目上線后只需把dist文件丟到服務(wù)器即可。ps:如果本地測(cè)試，則需修改webpack生產(chǎn)環(huán)境下的assetsPublicPath配置

注意事項(xiàng)：

1.最好使用cnpm代替npm安裝依賴，因?yàn)殚_(kāi)發(fā)過(guò)程中少部分包如果用npm是無(wú)法下載完成，一直卡住，換為cnpm毫無(wú)壓力記得加上--save選項(xiàng)，否則別人安裝的話會(huì)缺少包.

2.路徑說(shuō)明

‘/‘, 表示項(xiàng)目根目錄

‘./‘，表示當(dāng)前目錄

‘../‘ ，表示上一級(jí)目錄，可以連續(xù)多個(gè)，比如‘../../../‘表示往外層退3級(jí)目錄

3.所有組件的數(shù)據(jù)都必須放置在data函數(shù)返回的對(duì)象中，無(wú)論是否有數(shù)據(jù)，否則會(huì)報(bào)錯(cuò)。
4.一個(gè)template組件下只能有一個(gè)并列的div，否則報(bào)錯(cuò)。

5.ESLint 格式問(wèn)題

1.vue 創(chuàng)建項(xiàng)目時(shí)，ESLint 選擇啟用時(shí)候，因 ESLint 代碼檢查極其嚴(yán)格，縮進(jìn)空格數(shù)量，尾部空行等皆在檢查之列，可以選擇關(guān)閉。

build/webpack.base.conf.js 注釋掉 module->rules 中 ESLint 規(guī)則，關(guān)閉代碼：

//...(config.dev.useEslint ? [createLintingRule()] : []),

規(guī)范起見(jiàn)，修改 .eslintrc.js 文件 rules 節(jié)點(diǎn)，關(guān)閉指定格式檢查。

例如'semi': ['off', 'always'], 需要分號(hào)的地方即錄入，否則 ESLint 強(qiáng)制檢查不錄入分號(hào)。說(shuō)明參照https://eslint.org/docs/rules/semi。隨后重新 npm run dev 即可。完整說(shuō)明參照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ù)開(kāi)發(fā)工具 Tab Size 默認(rèn) 4，ESLint 默認(rèn) 2，需要將開(kāi)發(fā)工具 Tab Size 默認(rèn)值調(diào)為2或關(guān)閉 ESLint

3.VUE 腳本結(jié)束標(biāo)志 </script> 或者.vue文件結(jié)尾</style>不能作為文件結(jié)尾，其后必須另起一行寫(xiě)入其它代碼，必要時(shí)插入空行.

常見(jiàn)問(wèn)題：

1.npm run dev 提示 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

not found module ‘xxx'

原因：依賴庫(kù)不完整
方案：項(xiàng)目所在目錄運(yùn)行 npm install xxx -S 安裝相關(guān)依賴包，或按照如下指定安裝相關(guān)版本，npm install xx@版本號(hào) -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文件本地測(cè)試發(fā)現(xiàn)404錯(cuò)誤。

原因：本地測(cè)試當(dāng)前文件默認(rèn)路徑以‘./'開(kāi)頭，vue配置文件中默認(rèn)以‘/'開(kāi)頭

方案：設(shè)置config/index.js中assetsPublicPath屬性值為‘./'

vue項(xiàng)目啟動(dòng)原理

1.讀取 package.json 文件 scripts 內(nèi)部節(jié)點(diǎn)，例 start / build / dev 節(jié)點(diǎn)，根據(jù)節(jié)點(diǎn)值獲得相應(yīng)啟動(dòng)參數(shù)

2.Webpack配置項(xiàng)目入口文件，出口文件名。

在.\build\webpack.base.conf.js文件配置入口文件module.exports.entry值即項(xiàng)目總?cè)肟?，默認(rèn)為 ./src/main.js。

在config/index.js文件中build對(duì)象assetsRoot中配置打包后文件名。

3../src/main.js。頁(yè)面入口js文件，實(shí)例化一個(gè)Vue，平且引入vue和主入口組件。componens和template屬性缺一不可。

new Vue({
 el: '#app',
 router,
 components: { App }, // 定義組件映射
 template: '<App/>'  // 定義組件模板
})

1.打包項(xiàng)目提交到Svn或github注意不要提交node_modules文件夾，以免造成資源浪費(fèi)

附件

1.幫助文檔

vuex狀態(tài)管理庫(kù):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。

淘寶鏡像包與原包存在一定差異，避免莫名其妙問(wèn)題起見(jiàn)，盡量使用原包命令 npm 安裝，可以使用 hosts FQ模式。

3.依賴包出錯(cuò)刪除重裝

刪除全局包

npm uninstall -g 包名

刪除本地包

npm uninstall 包名

不成功可以采用 remove 代替 uninstall

4.引用外部 js

引用外部 js 有全局引用、VUE 外部引用、VUE 內(nèi)部引用等多種方法

1.內(nèi)部引用

A. 安裝模塊至項(xiàng)目目錄（jQuery案例）

npm install jquery --save

B. 確認(rèn) package.json dependencies 節(jié)點(diǎn)已添加依賴
"jquery": "^3.3.1",

C. Vue 文件直接引用

import $ from 'jquery'

2.全局引用

A. 在package.json中添加依賴文件dependencies:{"jquery":"^2.2.1"} //可以自己指定版本

B. 重新安裝項(xiàng)目依賴cnpm install

c. 在webpack.base.conf.js中module.exports中提供一個(gè)全局變量:$

總結(jié)

以上所述是小編給大家介紹的從零到一詳聊創(chuàng)建Vue工程及遇到的常見(jiàn)問(wèn)題,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論