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 App4.项目管理
点击左侧导航栏“插件”可以查看已安装的插件,再点击右上角“添加插件”
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文件夹,进行发布。
编译压缩文件夹
网友评论