伸手党系列五:vue3.0+cli4.0+elementPlus项目搭建过程

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插件(这个根据自己的情况自己选择)


image

路由模式选完后,会进行下面css预处理器的选择(这个也根据自己喜好来选择)


image

然后会出现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文件里。(这个根据自己的情况自己选择)


image

这一步是问你需不需要把这些配置保存下来,(如果选择保存的话,下次在使用vue create + 项目名称,创建项目时就会按照这次已经选择的这些配置直接创建项目。)

Save this as a preset for future projects? (y/N) yes
// 选择保存后 ↓↓↓
Save preset as :   // 这里填写一个名称

4. 自定义模板选择完毕开始构建项目

这样我们的项目模板就开始自动创建了。


image

最后我们进入 我们创建的这个项目根目录中执行 npm run serve 执行成功后会出现下面的的地址


image

点击任意一个地址就能看到我们的这个demo了。

image

看完感觉还行请记得点个赞,您的支持是我创作的动力。谢谢!

你可能感兴趣的:(伸手党系列五:vue3.0+cli4.0+elementPlus项目搭建过程)