.jpg)
.jpg)
.jpg)
.jpg)
简介
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。此外，当与现代化的工具链以及各种支持类库结合使用时，Vue完全能够为复杂的单页应用提供驱动。
编译和测试方式
1.选择操作环境
本文选用华为鲲鹏云服务ECS KC1实例做测试
2.解决依赖关系
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.在全局路径下建立指向可执行文件“node”及“npm”的软链接，以便在任意目录下执行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)执行安装命令。
npm install --global vue-cli2)终端返回以下信息则表示安装结束：
+ vue-cli@2.9.6
updated 1 package in 26.817s
3)打开NodeJS的解压目录，并进入该解压目录的bin目录下，执行命令，显示版本号则表示安装成功。
cd /root/node-v10.16.0-linux-arm64/bin/./vue -V
4)在全局路径下创建指向Vue的软连接，以便执行Vue命令。
ln -s /root/node-v10.16.0-linux-arm64/bin/vue /usr/local/bin/vue4.运行测试Vue
1)创建一个Vue项目。
“testProject”为创建的项目名，可任意命名。
vue init webpack testProject
按照提示输入相关参数即可，示例如下，创建成功后会返回提示信息。
? 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)当前目录下会生成“testProject”目录，进入该目录，并执行启动命令。
npm run dev
终端返回“Your application is running here: http://localhost:8080”，则表示启动成功。
3)在默认配置情况下，Vue本地服务不能被外部IP访问，所以需要修改配置文件，修改步骤如下：
a.进入“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)修改完配置文件后，重新执行命令，启动Vue。
npm run dev
启动后就可以通过IP访问，比如IP为“192.168.1.108”，在浏览器地址栏输入“http://192.168.1.108:8080”/即可访问，如下图所示。
