1.?背景

Vue工程化項(xiàng)目環(huán)境配置還是比較麻煩的，本篇來詳細(xì)的記錄下從0開始的安裝、構(gòu)建、打包、運(yùn)行全過程。

2. 整體步驟

第一，安裝Node.js，這個(gè)是前端工程化項(xiàng)目運(yùn)行的基礎(chǔ)環(huán)境。

第二，安裝Vue，使我們前端開發(fā)環(huán)境可以支持Vue開發(fā)。

第三，安裝Vue CLI,這是Vue提供的交互時(shí)的項(xiàng)目腳手架，有點(diǎn)難理解是吧，其實(shí)就是一個(gè)快速構(gòu)建Vue工程的小工具，通過Vue CLI，開發(fā)人員可以使用命令行或者可視化界面快速構(gòu)建Vue工程項(xiàng)目。

第四，我們通過Vue CLI提供的可視化工具來構(gòu)建一個(gè)Vue工程。

第五，我們運(yùn)行構(gòu)建的Vue工程。

第六，我們將Vue項(xiàng)目打包，并部署到web服務(wù)器上運(yùn)行。

3. 詳細(xì)過程

3.1 安裝Node.js

官網(wǎng)下載.msi格式安裝包，[下載鏈接] nodejs.org/zh-cn/download/ ，此處由于是64位計(jì)算機(jī)，所以選擇如下。

下載完成后雙擊安裝文件，開始安裝，大部分直接點(diǎn)擊下一步即可，需要注意的此處我給出提示。

首先是安裝位置，最好安裝到D盤，避免C盤占滿了。

選擇安裝的特性，此處保持默認(rèn)，全部選擇即可。

然后其余的全部點(diǎn)擊下一步，等待安裝完成。

安裝node.js完成后，可以打開命令行，輸入node -v驗(yàn)證node.js安裝成功。

3.2 安裝Vue

打開命令行，輸入npm install vue -g全局安裝Vue，由于Vue使用頻率很高，所以直接全局安裝。

此時(shí)耐心等待安裝完成即可，出現(xiàn)如下圖提示，則安裝完成：

3.3 安裝Vue CLI

由于Vue CLI安裝時(shí)間比較長(zhǎng)，此處建議先安裝cnpm，輸入命令npm install -g cnpm --registry=http://registry.npm.taobao.org后回車。此處cnpm可以被認(rèn)為是npm的國(guó)內(nèi)鏡像，后續(xù)執(zhí)行命令時(shí)可以將npm替換為cnpm加速安裝。出現(xiàn)如下圖所示，則安裝cnpm完成。

此時(shí)可以安裝Vue腳手架Vue CLI了，使用命令行輸入cnpm install -g @vue/cli后回車運(yùn)行，等待安裝完成即可。出現(xiàn)如下圖所示安裝完成。

3.4 創(chuàng)建Vue工程

打開命令行，輸入vue ui打開圖形化界面，如下圖即為用于創(chuàng)建、管理Vue項(xiàng)目的可視化界面。

點(diǎn)擊創(chuàng)建按鈕開始創(chuàng)建，如下圖依次設(shè)置項(xiàng)目文件夾，項(xiàng)目路徑，包管理器(使用npm即可)，然后點(diǎn)擊下一步。

預(yù)設(shè)部分，我們選擇手動(dòng)配置。

功能部分，我們一般選擇Router路由、Vuex狀態(tài)管理、CSS Pre-processor預(yù)處理幾項(xiàng)即可。

在配置部分，選擇啟用history mode，然后預(yù)處理器選擇Sass即可。

此時(shí)點(diǎn)擊創(chuàng)建項(xiàng)目，即可安裝我們的配置創(chuàng)建一個(gè)Vue工程項(xiàng)目了，注意后面還有一個(gè)預(yù)設(shè)部分，我們此處點(diǎn)擊創(chuàng)建項(xiàng)目不保存預(yù)設(shè)即可。

等待出現(xiàn)如下界面，項(xiàng)目創(chuàng)建完成：

3.5 運(yùn)行項(xiàng)目

此時(shí)我們可以通過可視化界面運(yùn)行工程，依次點(diǎn)擊任務(wù)-serve-運(yùn)行-啟動(dòng)app即可運(yùn)行項(xiàng)目了。

這種方式比較麻煩，一般我們使用vue ui命令打開可視化界面并創(chuàng)建項(xiàng)目后，就可以關(guān)掉可視化界面并退出命令行了。然后我們通過cmd切換到項(xiàng)目路徑下，運(yùn)行’npm run serve’即可啟動(dòng)項(xiàng)目，如下圖：

當(dāng)項(xiàng)目啟動(dòng)后，命令行會(huì)顯示訪問地址，通過地址直接訪問項(xiàng)目即可。

3.6 打包部署項(xiàng)目

在命令行中切換到vue-demo項(xiàng)目路徑下，運(yùn)行npm run build即可將項(xiàng)目打包。

注意打包的意義，在打包前，項(xiàng)目只能在node.js環(huán)境下調(diào)試運(yùn)行，打包后，可以部署到tomcat或者iis或者niginx等web服務(wù)器運(yùn)行。

打包完成后，在vue-demo路徑下的dist文件夾即為打包結(jié)果，將dist文件夾拷貝到web服務(wù)器相應(yīng)目錄下運(yùn)行即可。

4. 總結(jié)

node.js vue vue cli這3個(gè)安裝一次即可。

vue ui可視化界面，每次新建項(xiàng)目時(shí)使用一次即可。

后續(xù)可以直接使用命令行npm run serve進(jìn)行啟動(dòng)調(diào)試。

作者：熊貓大哥大
鏈接：https://www.imooc.com/article/314736
來源：慕課網(wǎng)
本文原創(chuàng)發(fā)布于慕課網(wǎng) ，轉(zhuǎn)載請(qǐng)注明出處，謝謝合作