vue cli 3.0快速建立项目

环境安装

首先须要安装node.js和npm最新版,查看版本

命令行运行：安装更新(-g指全局安装) :

npm install -g node

npm install -g npm

npm就自动为咱们更新到最新版本

淘宝npm镜像使用方法

npm config set registry https://registry.npm.taobao.org
cnpm config set registry https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org
配置后可经过下面方式来验证是否成功 ：
npm config get registry
复制代码

使用 npm 全局安装 vue-cli ：

npm i -g @vue/cli

建立项目

1-执行：

vue create 项目名

2-此处有两个选择：

default (babel, eslint)默认套餐，提供babel和eslint支持

Manually select features本身去选择须要的功能，提供更多的特性选择。

vue-cli 内置支持了8个功能特性，能够多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择全部，使用 i 键翻转选项。

对于每一项的功能，此处作个简单描述：

babel es6 转 es5。

TypeScript 支持使用 TypeScript 书写源码。

Progressive Web App (PWA) Support PWA 支持。

Router 支持 vue-router 。

Vuex 支持 vuex 。

CSS Pre-processors 支持 CSS 预处理器。

Linter / Formatter 支持代码风格检查和格式化。

Unit Testing 支持单元测试。

E2E Testing 支持 E2E 测试。

3-选择完成按住enter进入下一步，接下来都是对以前每项选项的更详细的选择。

css选择 本身喜爱

选择ESLint的代码规范，此处使用 Standard代码规范

选择什么时候进行代码检测，此处选择在保存时进行检测Lint on save

选择单元测试解决方案，此处选择 Jest

Linter / Formatter选择prettier

这一步就是要选择配置文件的位置了。对于 Babel 、 PostCSS 等，均可以有本身的配置文件： .babelrc 、 .postcssrc 等等，同时也能够把配置信息放在 package.json 里面。此处出于对编辑器（ Visual Studio Code ）的友好支持（编辑器通常默认会在项目根目录下寻找配置文件），选择把配置文件放在外面，选择 In dedicated config files

4-补充

Save this as a preset for future projects?这个就是问要不要把当前的这一系列选项配置保存起来，方便下一次建立项目时复用。

启动项目

初始完以后，进入到项目根目录：

cd 项目名

启动项目：

npm run serve

vue.config.js配置

此部份内容参考Vue-cli配置参考

vue.config.js是一个可选的配置文件，若是项目的（和package.json同级的）根目录中存在这个文件，那么它会被@vue/cli自动加载。你也可使用package.json中的vue字段，可是注意这种写法须要你严格遵守JSON的格式来写。

这个文件应该导出了一个包含了选项的对象

// vue.config.js
module.exports = {
  // 选项...
}
复制代码

配置代理

若是你的前端应用和后端 API 服务器没有运行在同一个主机上，你须要在开发环境下将 API 请求代理到 API 服务器。这个问题能够经过 vue.config.js 中的 devServer.proxy 选项来配置

vue-cli3.0的代理配置

devServer: {
    // webpack-dev-server 相关配置
    port: 8085, // 端口号
    host: "localhost",
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    hotOnly: false,
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    proxy: {
      "/ganziecommerce": {
        target: "http://192.168.0.110:8001",
        ws: true,
        changeOrigin: true
      }
    }
  },
复制代码

打包

publicPath: "./", // 基本路径

outputDir: "dist", // 输出文件目录,能够自定义

assetsDir: "assets", //静态资源目录(js,css,img,fonts)

npm run build //打包