选择要存放的目录cmd打开命令行工具,vue-cli3的创建命令与之前版本存在部分不同,需要配合使用cli3的环境,若非对应版本的环境,命令行会进行语句提示。
npm uninstall -g vue-cli //卸载原有环境
npm install -g @vue/cli //安装cil3环境
环境安装完成后,重新使用语句创建项目
vue create vue-demo //vue-demo 是项目文件夹名称
随后会提示进行一些初始化设置,可以根据实际需要进行选择
? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint) //默认配置
Default (Vue 3 Preview) ([Vue 3] babel, eslint) //默认配置
Manually select features //手动配置
选择手动配置
根据实际需求选择项目初期需要的依赖配置项,例如,vue-router/Vuex,如果前期没有选择后期也可以再安装相应的依赖
Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
>(*) Choose Vue version //选择vue的版本
(*) Babel //将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法
( ) TypeScript //JavaScript的一个超集
( ) Progressive Web App (PWA) Support
( ) Router //vue路由
( ) Vuex //Vuex
( ) CSS Pre-processors //CSS 预处理器(如:less、sass)
(*) Linter / Formatter //代码风格检查和格式化(如:ESlint)
( ) Unit Testing //单元测试(unit tests)
( ) E2E Testing //e2e(end to end) 测试
配置完成后会根据已选配置进行一些设置,根据实际需要选择yes/no就可以了(也可以一路一直回车)
//请选择一个预设
? Please pick a preset:
//检查项目所需的功能
? Check the features needed for your project: Babel, Router, Vuex, Linter
//路由器是否使用历史模式(hash路由路径带有#,history没有)
? Use history mode for router?
//选择linter/formatter配置:
? Pick a linter / formatter config:
//拾取其他lint特征
? Pick additional lint features:
//将Babel、ESLint等的配置放在哪里
? Where do you prefer placing config for Babel, ESLint, etc.?
//是否将此保存为将来项目的预设
? Save this as a preset for future projects? (y/N)
然后进行安装
安装成功后会提示运行的语句
cd vue-demo //定位到对应目录 回车
npm run serve //运行项目