文档首页 > > 移植指南> 安装Vue

安装Vue

分享
更新时间:2020/07/23 GMT+08:00

介绍

简要介绍

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

编写语言:JavaScript

一句话描述:Vue是一套用于构建用户界面的渐进式框架。

建议的版本

建议使用版本为“Vue-2.9”

环境要求

云服务器要求

本文以云服务器KC1实例测试,云服务器配置如表1所示。

表1 云服务器配置

项目

说明

规格

kc1.xlarge.2 | 4vCPUs | 8GB

磁盘

系统盘:高IO(40GB)

操作系统要求

操作系统要求如表2所示。

表2 操作系统要求

项目

版本

下载地址

CentOS

7.5

在公共镜像中已提供。

Kernel

4.14.0

在公共镜像中已提供。

配置安装环境

  1. 安装Git依赖包。

    yum install git –y

  2. 安装“node.js”包。

    Vue的安装依赖于Node.JS,因此需要先安装“node.js”
    1. 下载“node.js”包。

      wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-arm64.tar.xz

    2. 解压软件包。

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

    3. 在全局路径下建立指向可执行文件“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

安装

  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

运行和验证

  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访问,所以需要修改配置文件,修改步骤如下:
    1. 进入“testProject”目录。
    2. 修改“config/index.js”“host”属性为“0.0.0.0”
      1.  {
      2.  // ...,
      3.  host: '0.0.0.0',
      4.  port: 8080,
      5.  // ...
      6.  }
    3. 修改“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

  5. 启动后就可以通过IP访问,比如IP为“192.168.1.108”,在浏览器地址栏输入“http://192.168.1.108:8080”/即可访问,如图1所示。
    图1 访问Vue

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!非常感谢您的反馈,我们会继续努力做到更好!
反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问