vuecli3创建项目，尤其推荐用图形化界面
TL;DR
- 安装cli3的命令行
npm install -g @vue/cli - 安装预览单个vue文件
npm install -g @vue/cli-service-global - 强烈推荐使用
vue ui导入已有项目或新建项目，安装插件，进行eslint规则配置等超级好用 - 保存时自动统一代码风格，真的爽爆了
- 个人生成项目的习惯参数，这里换成ui视图也是一样的
vue create hello-vue # 选择这个 > Manually select feature # 哎 惭愧 我还不会ts ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ❯◉ CSS Pre-processors ◉ Linter / Formatter # 不选择 history模式，这个因项目而已，我这边hash够用 ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n # dart的比较快，其他的随意 ❯ Sass/SCSS (with dart-sass) # 加prettier，保存的时候，能自动格式化vue里的html和css，爽爆了，这里尽量不选错 ❯ ESLint + Prettier # 保存就自动lint，commit会太多 ❯◉ Lint on save # 分别生成配置文件，一目了然 ❯ In dedicated config files # 保存配置 Save this as a preset for future projects? y
- 本人水平有限，仅供参考
安装cli3
node -v
- 若低于8.9.0，,需要
npm install -g n和n stable更新node到最新的稳定版，mac下可能需要sudo - 报错的话，说明没有安装node，下载一个node
vue --version
- 版本不是3的就执行
npm uninstall vue-cli -g - 报错的话，直接安装cli3
npm install -g @vue/cli,再vue --version,检测下
cli直接预览单个vue文件
npm install -g @vue/cli-service-global- 去任意文件夹，建一个
App.vue，当然文件夹里还可以有别的文件，这个文件只是启动文件 vue serve App.vue文件夹里会生成Node_module,可以在浏览器访问页面vue build App.vue文件夹里会生成dist文件夹，可以用来部署
用于开发一个库、组件，做一些小demo等都是非常适合的！
命令行创建新项目
vue create hello-vue，hello-vue是文件夹名字，如果不存在会自动创建文件夹，如果存在会安装到那个文件夹中。- 开始弹出选择模板，按上下键选择
- default，默认配置，表示只有babel和eslint，选择这项之后，直接创建项目，一般不用这个
- Manually select feature，表示手动配置，一般选择这个
- 手动设置完之后，如果保存配置，这里下次就会多个选项
- 选择配置
空格键选中/反选，按a键全选/全不选，按i键反选已选择项， 上下键 上下移动选择。可以根据项目大小和功能体验配置不同的功能- 选中
router的时候，注意！！！在问Use history mode for router?建议选择n，history的模式需要服务器的一些配合，如果后期要用再打开 - 选中
css预处理器，如果是sass，建议选择Sass/SCSS (with dart-sass) - 选中
lint/formatter（支持代码风格检查和格式化），个人偏好选择eslint+prettier，standard规范到底是啥，airbnb In dedicated config files表示babel,postcss,eslint的配置都是独立的文件，一般选择这个Save this as a preset for future projects? (Y/n)// 是否记录一下以便下次继续使用这套配置，需要的话输入配置的名字
npm run serve打开浏览器看下
强烈推荐，图形化新建、管理项目
下面的可以不用看，没上面写的好，哈哈哈
vue ui在想要建项目的文件夹里运行此命令，然后就是小白式看看点点
- 进入项目仪表盘
- 设置快速启动项目 => 点击右上角的 自定义 => 选择 运行任务 => 选择 完成 => 点击 配置部件
- 任务 => serve => 变量 => 可配置端口，环境变量，https开启等具体配置，其他任务也通过变量配置
- 配置那边，如设置部署路径，输出目录之类的，Eslint规则修改
- 安装依赖的话，注意选择是开发还是运行依赖
- 安装插件
