安装vue-cli
全局安装（使用淘宝的镜像下载会很快的），可以看这篇 Webpack安装
//安装最新版本
cnpm install -g @vue/cli
使用
下载完成之后，查看vue版本，输入
vue -v
image
创建项目
利用cmd操作到需要创建的目录下
vue create project-name
project-name是自定义的名字，可以根据个人情况选择
创建项目选项
默认安装
选择default,进行默认安装
选择之后就会开始下载相关的依赖，
安装过程
下载完成，创建成功
创建成功
会生成的一个自定义名称的文件夹，全部文件目录如下：
生成的文件目录
自定义安装
选择Manually，自定义安装
自定义项目
( ) Bable //es6+ to es5
( ) TypeScript // 支持使用 TypeScript 书写源码，
( ) Progressive Web App (PWA) Support // PWA 支持，渐进式web应用
( ) Router // 支持 vue-router，路由
( ) Vuex // 支持 vuex，状态
( ) CSS Pre-processors // CSS 预处理器。
( ) Linter / Formatter // 支持代码风格检查和格式化，规范格式
( ) Unit Testing // 支持单元测试。
( ) E2E Testing // 支持 E2E 测试。
根据自己的情况选择配置，选择选项不同，后面的配置也大不相同
选择方法：
- 利用 上下箭头 移动光标，按空格进行选择选项
- 按 字母a 全选，按 字母i 反选（已经选择的取消，没有选择的选择）
- 回车确认，确认选择完成
我选择如图所示（根据个人需要选择）
image
选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，需要使用：y，不需要：n
在这一步我们可以发现上一步选择的配置：Bable ，router ， CSS Pre-processors
image
选择一个CSS预处理程序(默认支持PostCSS、Autoprefixer和CSS模块) Sass/SCSS(with node-sass) 自动编译实时的，Sass/SCSS(with dart-sass)需要保存后才会生效
image
将Babel, ESLint等的配置放在哪里，单独存放或者并入package.json，一般单独存放比较好找
image
是否保存当前预设，下次构建无需再次配置，这是创建的最后一步，这肯定是要否认了，项目不同，需要的配置也不一样
image
目录：
image
启动服务
通过查看package.json配置我们会发现这些命令：
注意：此处用到是默认生成的项目文件
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
npm run 使用这些命令，但注意需要到创建项目的目录下（npm命令依赖于package.json文件）
- serve —— 启动一个web服务器
此配置与webpack-dev-server类似
- 可以修改package.json文件
--open 在服务器启动时打开浏览器
--copy 在服务器启动时将 URL 复制到剪切版
--mode 指定环境模式 (默认值：development)
--host 指定 host (默认值：0.0.0.0)
--port 指定 port (默认值：8080)
--https 使用 https (默认值：false)
--hot 热更新（默认值：false）
--process 显示编译进度（默认值：true）
--inline:true 自动刷新页面
使用方式如下：
"serve": "vue-cli-service serve --hot --inline --open --port 8989 --compress ",
- 也可以查看官方说明配置文件，基本和 webpack-dev-server 一样的用法
serve
稍微修改一下（打开的网页默认支持热更新无需添加webpack中的 --hot --inline）：
//开启服务直接打开网页，修改端口号
"serve": "vue-cli-service serve --open --port 8989 ",
- build —— 生成对文件进行打包，产生一个dist文件夹，要明确知道入口文件 main.js
可添加选性值:
--mode 指定环境模式 (默认值：production)
--dest 指定输出目录 (默认值：dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值：app)
--name 库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
--no-clean 在构建项目之前不清除目标目录
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化
build
- lint —— 查看是否出现线程错误
lint
项目管理
打开npm的cmd，输入
vue ui
启动ui界面
自动打开浏览器，显示 Vue 项目管理界面
ui界面
在此页面下创建项目很方便，你值得拥有
参考：
网友评论