vue-cli3 安装创建项目以及目录结构
安装脚手架cli3.0
全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli
查看版本/是否安装成功 vue -V
如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具
npm install -g @vue/cli-init
vue init webpack my-project
创建项目
在想要的件夹下面创建项目 vue create my-project
如果之前创建过项目，会记录上次创建项目的配置
指向的vuecli3是因为上一次记录过的cli3配置，第一次执行create是没有的
按键盘上下键可以选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了
选择配置，看个人项目需求
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。
注意，空格键是选中与取消，A键是全选
css的预处理，我选择的是stylus
我选择的是ESLint + Prettier
选择语法检查方式，我自己选择保存就检测，第一个是保存检测，第二个是fix和commit的时候检测
单元测试，我选择了Mocha
配置文件存放地方：第一个是独立文件夹位置，第二个是在package.json文件里
问是否记录这一次的配置，以便下次使用，如一开始的时候会显示的vuecli3配置
回车确定等待下载
装好后，启动
cd my-project // 进入到项目根目录
npm run serve // 启动项目
3.0的目录结构
3.0的目录比2.0简洁了很多，没了build和config等目录。若需要其他配置则需要自己手动配置了呢
在根目录下新建一个vue.config.js文件，进行你的配置，具体配置看文档，我在最下边简单罗列了几个
module.exports = {
// 部署应用时的基本 URL
baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',
// build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
outputDir: 'dist',
// build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir: '',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
indexPath: 'index.html',
// 默认在生成的静态资源文件名中包含hash以控制缓存
filenameHashing: true,
// 构建多页面应用，页面的配置
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
},
// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)
lintOnSave: process.env.NODE_ENV !== 'production',
// 是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
// Babel 显式转译列表
transpileDependencies: [],
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
productionSourceMap: true,
// 设置生成的 HTML 中 和