前言
改变从行动开始。突然发现vue-cli以及发布到4.x版本了，所以准备重新学习梳理下。顺便搭建一个基本的项目架构。包含项目目录，动态面包屑，路由配置，http封装，路由守卫，多环境配置，项目基本配置，登录功能，vuex，以及项目打包，项目打包成app等。当然一步一步的来。首先就从项目创建开始。
一、升级本地环境
查看node版本 vue-cli3.0以上 要 nodeJs ≧ 8.9（官方推荐 8.11.0+） node官网
node -v
查看vue版本
vue -V
如是已安装vue-cli2，就先卸载，再安装
npm uninstall vue-cli -g 或 yarn global remove vue-cli
安装最新版本
npm install @vue/cli -g 或 yarn global add @vue/cli
安装指定版本
npm install -g vue-cli@版本号
二、创建项目
vue create demo //文件名 不支持驼峰（含大写字母）
camera 是我的自定义配置不需要关注
default 是使用默认配置
Manually select features 是自定义配置
通常我们会选择自定义配置，如果是使用git bash创建项目时会发现上下箭头无法切换。官方的解决办法
也可以修改git的bash.bashrc文件 用文本编辑器打开 在最下方添加 alias vue='winpty vue.cmd' 我这里就直接偷懒使用下面指令创建了
winpty vue.cmd create demo
然后是选择自定义配置， 空格选中/取消，回车进入下一步。
(*) Babel (转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。必选)
( ) TypeScript （项目中使用ts开发的话，就勾选）
( ) Progressive Web App (PWA) Support (接口缓存，优化项目，渐进式Web应用程序)
(*) Router (vue路由)
(*) Vuex (项目使用vuex就勾选)
(*) CSS Pre-processors (css预处理器，一般项目都会需要。如：less、sas)
>( ) Linter / Formatter (代码风格检查和格式化，我这里就不选了，如：ESlint)
( ) Unit Testing (单元测试 unit tests)
( ) E2E Testing （需求界面测试 e2e（end to end））
然后就是针对你所选配置选项进行的一系列选择。
是否使用babel做转义 y
Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) ：
是否使用class风格的组件语法 y
Use class-style component syntax? (Y/n)
是否使用history模式 直白来说就是是否路径带 # 号，我这里就选 N了，否则服务器还要进行配置 具体看需求
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass) //保存后才会生效 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现
Sass/SCSS (with node-sass) //自动编译实时的
Less
Stylus //Stylus用的人也挺多 按需选择
选择配置信息存放位置，此选项都行，本着项目结构简单的想法，我选择了第二个
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
In dedicated config files //独立文件放置 选独立会多出配置文件
In package.json //放package.json里
是否保存当前配置 y
Save this as a preset for future projects? (y/N) ：
然后给当前配置取名，下次创建项目选择该配置名一键配置 如我一开始的camera 选项。
三、启动项目
等待项目创建完成，启动项目
cd demo //cd 项目名 进入该项目
npm run serve //启动
最后每个项目必有的创建配置文件 根目录中创建vue.config.js 具体配置后面文章再详细说明。
结束语
改变从行动开始。一个基本的vue项目创建就这些了，当然具体的还是得看你们项目的需求去创建或者后期去添加。该项目具体代码已经上传到码云上了，后面会完善项目基本架构。感兴趣的可以点击后面链接去拉下来看一下，希望对大家有一点帮助。混沌码云仓库
