如何编译Vue

时间:2020-11-16 11:39:08

简介

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。此外,当与现代化的工具链以及各种支持类库结合使用时,Vue完全能够为复杂的单页应用提供驱动。

编译和测试方式

1.选择操作环境

本文选用华为鲲鹏云服务ECS KC1实例做测试

2.解决依赖关系

1)安装Git依赖包。

yum install git –y

2)安装“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.xz

b.解压软件包。

tar -xvf node-v10.16.0-linux-arm64.tar.xz

c.在全局路径下建立指向可执行文件“node”及“npm”的软链接,以便在任意目录下执行node及npm命令。

1.npm是随同NodeJS绑定安装的包管理工具

ln -s /root/node-v10.16.0-linux-arm64/bin/node /usr/local/bin/node

ln -s /root/node-v10.16.0-linux-arm64/bin/npm /usr/local/bin/npm

3.安装Vue

1)执行安装命令。

npm install --global vue-cli

2)终端返回以下信息则表示安装结束:

+ 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/vue

4.运行测试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”/即可访问,如下图所示。

上一篇: Shc是什么

下一篇: React是什么

猜你喜欢