vue 环境配置

vue 环境配置

下载 nodejs

下载地址

https://nodejs.org/en/download/

Win选择： Windows Installer (.msi)

命令

• node -v 查看版本号
• npm -v 查看包管理工具版本号

webstrom 配置

安装 Vue CLI

• Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。
• 它为现代前端工作流提供了 batteries-included 的构建设置。
• 只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。
• 更多详情可查阅 Vue CLI 的文档。

安装流程

• 到项目父文件夹下
• npm install -g @vue/cli 安装
• npm install -g @vue/cli-init
• vue init webpack test_travel
• 提示：
• 文件夹已存在是否继续？ Y
• 项目名（不能有大写） 回车
• 描述 回车
• 作者 回车
• 编译方式：选第一个 运行时+普通时 编译 runtime + compiler：recommended for most users
• 安装 vue-router？ Y
• Use ESLint to lint your code ？ 是否对代码工整度进行检测 N
• 安装单元测试？ N
• e2e 测试？ N
• 使用什么工具进行包管理？ 选 NPM
• 安装完成

启动项目

• 进入项目文件夹
• npm run dev
• 浏览器打开 http://localhost:8080/ 可以查看欢迎页

安装依赖包【根据自己的请款安装，此处只做示例】

• 进入项目文件夹
• npm install stylus --save
• npm install stylus-loader --save
• npm install fastclick --save

避免部分手机白屏,浏览器不兼容promise

• npm install babel-polyfill -save

//main.js
import 'babel-polyfill'

安装ajax工具包

npm install axios --save

修改项目请求路径

config/index.js

    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:8080',
        //路径替换
        pathRewrite: {
          '^/api': '/static/test'
        }
      }
    },

通过ip地址访问

package.json 添加 --host0.0.0.0

    "dev": "webpack-dev-server --host0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",

打包

项目文件夹下：npm run build