簡(jiǎn)介
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。此外，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。
編譯和測(cè)試方式
1.選擇操作環(huán)境
本文選用華為鯤鵬云服務(wù)ECS KC1實(shí)例做測(cè)試
2.解決依賴關(guān)系
1)安裝Git依賴包。
yum install git –y2)安裝“node.js”包。
Vue的安裝依賴于Node.JS，因此需要先安裝“node.js”包
a.下載“node.js”包。
wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-arm64.tar.xzb.解壓軟件包。
tar -xvf node-v10.16.0-linux-arm64.tar.xzc.在全局路徑下建立指向可執(zhí)行文件“node”及“npm”的軟鏈接，以便在任意目錄下執(zhí)行node及npm命令。
1.npm是隨同NodeJS綁定安裝的包管理工具
ln -s /root/node-v10.16.0-linux-arm64/bin/node /usr/local/bin/nodeln -s /root/node-v10.16.0-linux-arm64/bin/npm /usr/local/bin/npm
3.安裝Vue
1)執(zhí)行安裝命令。
npm install --global vue-cli2)終端返回以下信息則表示安裝結(jié)束：
+ vue-cli@2.9.6
updated 1 package in 26.817s
3)打開(kāi)NodeJS的解壓目錄，并進(jìn)入該解壓目錄的bin目錄下，執(zhí)行命令，顯示版本號(hào)則表示安裝成功。
cd /root/node-v10.16.0-linux-arm64/bin/./vue -V
4)在全局路徑下創(chuàng)建指向Vue的軟連接，以便執(zhí)行Vue命令。
ln -s /root/node-v10.16.0-linux-arm64/bin/vue /usr/local/bin/vue4.運(yùn)行測(cè)試Vue
1)創(chuàng)建一個(gè)Vue項(xiàng)目。
“testProject”為創(chuàng)建的項(xiàng)目名，可任意命名。
vue init webpack testProject
按照提示輸入相關(guān)參數(shù)即可，示例如下，創(chuàng)建成功后會(huì)返回提示信息。
? Project name test
? Project description A Vue.js project
? Author te
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project
has been created? (recommended) npm
vue-cli ·
Generated "testProject".
# Installing project dependencies ...
...
# Project initialization finished!
# ========================
To get started:
cd testProject
npm run dev
2)當(dāng)前目錄下會(huì)生成“testProject”目錄，進(jìn)入該目錄，并執(zhí)行啟動(dòng)命令。
npm run dev
終端返回“Your application is running here: http://localhost:8080”，則表示啟動(dòng)成功。
3)在默認(rèn)配置情況下，Vue本地服務(wù)不能被外部IP訪問(wèn)，所以需要修改配置文件，修改步驟如下：
a.進(jìn)入“testProject”目錄。
b.修改“config/index.js” 的“host”屬性為“0.0.0.0”。
1. {
2. // ...,
3. host: '0.0.0.0',
4. port: 8080,
5. // ...
6. }
c.修改“build/webpack.dev.conf.js”的“devServer”配置，增加一行“disableHostCheck: true,”。
1. devServer: {
2. clientLogLevel: 'warning',
3. historyApiFallback: true,
4. hot: true,
5. compress: true,
6. host: HOST || config.dev.host,
7. port: PORT || config.dev.port,
8. open: config.dev.autoOpenBrowser,
9. overlay: config.dev.errorOverlay
10. ? { warnings: false, errors: true }
11. : false,
12. publicPath: config.dev.assetsPublicPath,
13. proxy: config.dev.proxyTable,
14. quiet: true, // necessary for FriendlyErrorsPlugin
15. disableHostCheck: true,
16. watchOptions: {
17. poll: config.dev.poll,
18. }
}
4)修改完配置文件后，重新執(zhí)行命令，啟動(dòng)Vue。
npm run dev
啟動(dòng)后就可以通過(guò)IP訪問(wèn)，比如IP為“192.168.1.108”，在瀏覽器地址欄輸入“http://192.168.1.108:8080”/即可訪問(wèn)，如下圖所示。
