伸手党系列五: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 <space> to select, <a> to toggle all, <i> 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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,264评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,549评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,389评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,616评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,461评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,351评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,776评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,414评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,722评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,760评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,537评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,381评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,787评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,030评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,304评论 1 252
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,734评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,943评论 2 336

推荐阅读更多精彩内容