环境安装

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

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

npm install -g node

npm install -g npm

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

淘宝npm镜像使用方法

npm config set registry  config set registry  config set registry 配置后可通过下面方式来验证是否成功 ：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.jsmodule.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: '' // 配置跨域处理,只有一个代理 proxy: { "/ganziecommerce": { target: "", ws: true, changeOrigin: true } } },

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

outputDir: "dist", // 输出文件目录,可以自定义

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

npm run build //打包

链接：

作者：番茄炒蛋酱