vue-cli3.0脚手架项目流程详解

1.安装vue-cli 3.0

npm install -g @vue/cli
＃ 或者
纱线全局添加@vue/cli

安装成功后查看版本：vue -V（大写V）

2。命令变更

vue 创建 --help

用法：创建[选项]

创建一个由 `vue-cli-service` 驱动的新项目

选项：

-p, --preset 忽略提示并使用已保存或远程预设
-d, --default 忽略提示并使用默认的默认选项
-i, --inlinePreset 忽略提示并使用内联 JSON 字符串预设选项
-m, --packageManager 安装依赖项时使用指定的 npm 客户端
-r, --registry 安装依赖项时使用指定的 npm 注册表（仅适用于 npm 客户端）
-g, --git [message] 强制/跳过 git 初始化，并可选择指定初始化提交信息
-n, --no-git 跳过 git 初始化
-f, --force 覆盖目标目录中可能存在的配置
-c, --clone 使用 git clone 获取远程默认选项
-x, --proxy 使用指定代理创建项目
-b, --bare 创建项目时省略默认组件中的新手引导信息
-h, --help 输出帮助信息

3.创建项目

到指定目录创建项目（project-name:项目名称）

vue 创建项目名称

my-default是我原来保存的模板；

default 是 使用默认配置

手动选择功能 是 自定义配置

4。选择配置（自定义配置）

5。选择css预编译，这里我选择less

请选择预设：手动选择功能
 检查您的项目所需的功能：路由器、Vuex、CSS 预处理器、Linter、Unit选择一个 CSS 预处理器（默认支持 PostCSS、Autoprefixer 和 CSS 模块）：
 SCSS/SASS
 > 更少
 手写笔

6.语法检测工具，这里我选择ESLint + Standard config

 请选择预设：手动选择功能
 检查您的项目所需的功能：路由器、Vuex、CSS 预处理器、Linter、Unit
 选择一个 CSS 预处理器（默认支持 PostCSS、Autoprefixer 和 CSS 模块）：Stylus
 选择 linter / 格式化程序配置：（使用箭头键）
 仅具有错误预防功能的 ESLint
 ESLint + Airbnb 配置
> ESLint + 标准配置
 ESLint + Prettier

7.选择语法检查方式，这里我选择保存就检测

 请选择预设：手动选择功能
 检查您的项目所需的功能：路由器、Vuex、CSS 预处理器、Linter、Unit
 选择一个 CSS 预处理器（默认支持 PostCSS、Autoprefixer 和 CSS 模块）：Stylus
 选择一个 linter / 格式化程序配置：Prettier选择其他 lint 功能：（按  选择， 切换全部， 反转选择）
>( ) Lint on save // 保存时测试
 ( ) Lint and fix on commit // 修复和提交时检查 

 请选择预设：手动选择功能
 检查您的项目所需的功能：路由器、Vuex、CSS 预处理器、Linter、Unit
 选择一个 CSS 预处理器（默认支持 PostCSS、Autoprefixer 和 CSS 模块）：Stylus
 选择一个 linter / 格式化程序配置：Prettier
 选择其他 lint 功能：保存时 Lint
 选择一个单元测试解决方案：Jest
 您更喜欢在哪里放置 Babel、PostCSS、ESLint 等的配置？ （使用箭头键）
> 在专用配置文件中 // 独立文件放置
 在package.json中 // 放入package.json中

 请选择预设：手动选择功能检查您的项目所需的功能：路由器、Vuex、CSS 预处理器、Linter、Unit
 选择一个 CSS 预处理器（默认支持 PostCSS、Autoprefixer 和 CSS 模块）：Stylus
 选择一个 linter / 格式化程序配置：Prettier
 选择其他 lint 功能：保存时 Lint
 选择一个单元测试解决方案：Jest
 您更喜欢在哪里放置 Babel、PostCSS、ESLint 等的配置？在专用配置文件中
 将此保存为未来项目的预设吗？ (Y/n) // 是否要记录下来以便下次继续使用此配置？ 

cd project-name // 进入项目根目录
runserve // 运行项目