1. 使用npm安装 cli 脚手架
// npm是node的包管理工具,如果你的电脑还没有安装node请先去node官网下载node安装包,再来执行下面的操作。
npm install -g @vue/cli
// 如果嫌慢也可以用cnpm install -g @vue/cli 来安装。
// cnpm淘宝镜像安装方法 → npm install -g cnpm -registry=https://registry.npm.taobao.org
如果以前安装过cli脚手架,可以先检查下脚手架版本
应为只有(4.5.4 以上版本)才有创建 Vue3 的选项。
// cli脚手架版本检查方法:
vue -V
或者
vue --version
2. 使用 vue-cli 命令行创建项目
// 使用vue create + 项目名称 开始创建项目 (名称中不能有大写字母)
vue create vue3demo
输入命令后,会出现以下命令行交互窗口
? Please pick a preset: (Use arrow keys) //请选择预选项
> Default ([Vue 2] babel, eslint) //使用Vue2默认模板进行创建
Default (Vue 3 Preview) ([Vue 3] babel, eslint) //使用Vue3默认模板进行创建
Manually select features //手动选择(自定义)
一般我们选择 Manually select features 来自定义选择
如果出现上下箭头失效无法控制的情况可以看看我以前的这篇文章,可以帮你解决这个问题.
解决windows系统下 git 里使用 vue cli 创建项目上下箭头无效的三种解决方法
3. 根据项目情况自定义选择所需插件
选择自定义后会出现下面的选项,让我们自己来选择自己项目所需要的插件
(使用空格选择所需的插件,最后点击回车键完成选择)
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
>(*) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter // 格式化工具
( ) Unit Testing // 单元测试
( ) E2E Testing
一般我们选择以上这些就足够了。选择完成回车以后会出现 下面的选项
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x // 选这个就是创建vue2的项目
3.x (Preview) // 选这个就是创建vue3的项目
选择3版本后会提示是否使用 history 模式来初始化router插件(这个根据自己的情况自己选择)
路由模式选完后,会进行下面css预处理器的选择(这个也根据自己喜好来选择)
然后会出现ESLint的一些配置(自己看情况选择就好)
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
选完后会进一步让你选择ESLint的功能
? Pick additional lint features: (Press to select, to toggle all, to invert selection)
>(*) Lint on save // 保存的时候进行Lint
( ) Lint and fix on commit
回车后让你选择这些配置文件是单独存放,还是直接存放在package.json文件里。(这个根据自己的情况自己选择)
这一步是问你需不需要把这些配置保存下来,(如果选择保存的话,下次在使用vue create + 项目名称,创建项目时就会按照这次已经选择的这些配置直接创建项目。)
Save this as a preset for future projects? (y/N) yes
// 选择保存后 ↓↓↓
Save preset as : // 这里填写一个名称
4. 自定义模板选择完毕开始构建项目
这样我们的项目模板就开始自动创建了。
最后我们进入 我们创建的这个项目根目录中执行 npm run serve 执行成功后会出现下面的的地址
点击任意一个地址就能看到我们的这个demo了。
看完感觉还行请记得点个赞,您的支持是我创作的动力。谢谢!