1.安装
可以使用下列任一命令安装Vue CLI
npm install -g @vue/cli
# OR
yarn global add @vue/cli
检查安装是否成功
vue --version
2.初始化 vue ui
打开Vue 项目管理器
vue ui
效果如下：
Vue项目管理器
如果vue ui已经创建或者导入过项目，默认进入的是上一次打开项目的仪表盘，需要点击右上角的项目名称，点击“Vue项目管理器”，进入项目管理器。
Vue项目管理器
3.创建项目
点击创建
Vue项目管理器
点击在此创建新项目
Vue项目管理器
输入项目名称，该名称会在当前路径建立文件夹，可以修改当前的路径。选择包管理器，填写初始化git仓库，可以不填。
Vue项目管理器
点击下一步
Vue项目管理器
选择预设，这个怎么选择都可以，在项目创建之后，你仍然可以通过安装插件来增加功能，在此我们选择手动配置项目，进入功能选择。
Vue项目管理器
我们选择了Router和Vuex这两个一般项目基本上都会用到，选择了CSS Pre-processors使用CSS预处理器，至于是Sass、Less还是Stylus后边会选择，点击下一步
Vue项目管理器
配置的内容会根据上一步功能的选择来决定，当功能选择了Router所以这一步就会有是否使用History模式，功能项选择了CSS预处理器，配置项就要求选择对应的CSS预处理器是哪个。
Vue项目管理器
点击创建项目
Vue项目管理器
如果需要将刚才的预设保存，填写预设名，点击“保存预设并创建项目”，这样在此创建项目可以快速使用该预设，如果不需要，则直接点击“创建项目，不保存预设”
Vue项目管理器
等待一段时间，等待的时间跟选择的功能项多少和网络速度有关，下载完成后，会自动进入项目仪表盘，如下图。
Vue项目管理器
点击左侧导航“任务”——“serve”——“运行”
Vue项目管理器
运行编译成功后变成如下页面。
Vue项目管理器
点击右上角启动app
Vue项目管理器
进入默认启动页面，项目创建完成。
Vue.js App
4.项目管理
点击左侧导航栏“插件”可以查看已安装的插件，再点击右上角“添加插件”
Vue项目管理器
搜索安装你需要的插件。
Vue项目管理器
依赖跟插件操作一致。
Vue项目管理器
可以在此直接安装我们的依赖项，比如，我们安装一个ant-design-vue，在搜索框输入“ant-design-vue”，选择结果，然后点击“安装ant-design-vue”
Vue项目管理器
安装时页面会卡住，等待下载安装完成后，自动恢复。这个时候你的运行依赖就会多了一个ant-design-vue。
Vue项目管理器
可以再项目文件的node_modules查看
依赖项文件夹
等同于
$ npm install ant-design-vue --save
点击左侧导航“配置”，可对现有插件进行配置，可以不用一个个修改配置文件，直接通过界面可视化进行项目配置，如公共路径、输出目录、资源目录等
Vue项目管理器
项目任务可进行项目开发环境的编译、生产环境编译压缩、lint检查、webpack检查、单元测试等
查看输出日志
Vue项目管理器
内存分析
Vue项目管理器
在build编译发布版本
Vue项目管理器
编译至我们配置的dist文件夹，进行发布。
编译压缩文件夹
网友评论