(小白篇)vue-cli3.0创建项目+引入element-ui

vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。 首先,如果电脑已经安装了vue-cli2.0,需先进行卸载操作

# npm
npm uninstall vue-cli -g
# yarn
yarn global remove vue-cli

卸载后进行安装操作

# npm
npm install @vue/cli -g
# yarn
yarn global add @vue/cli

安装成功后,敲入以下命令行创建项目

vue create test-cli3

这跟2.0的vue init webpack命令不一样,如想保持一致的输入效果,请自行安装

npm install @vue/cli-init -g

那么下面就跟着创建步骤一步一步来吧!

在上面敲入创建项目的命令之后,就会出现下面的选择:

? Please pick a preset: (Use arrow keys)
> first_test (vue-router, less, babel, eslint)
  default (babel, eslint)
  Manually select features

选择插件,默认的只有babel和eslint,这里选择Manually select featrues,后面通过手动配置自己所需要的插件

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
>(*) Babel  // 预编译
 ( ) TypeScript  //TS
 ( ) Progressive Web App (PWA) Support
 (*) Router // 路由
 (*) Vuex // 数据仓库
 (*) CSS Pre-processors // css预处理器
 (*) Linter / Formatter  // 代码格式化
 ( ) Unit Testing // 单元测试
 ( ) E2E Testing  // e2e测试

上面的插件根据项目情况需要,使用空格选中。上面带*号的就是我这一次选中的。 选了router之后会询问是否开启history模式,以及选择css预处理器,这里根据个人情况选用。 接下来就是eslint选用规则,个人推荐第一或者第四种

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选择完eslint规则之后,再选择Lint on save配置当保存代码时使用校验规则。

下一步就是询问要将babel、eslint这些配置单独配置成文件还是放在package.json文件,这里为了不让package.json文件显得太混乱,把配置单独弄成文件,也方便配置

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.
> In dedicated config files
> In package.json

配置完这些之后,就会询问你是否将刚刚这些配置保存,方便以后创建项目的时候直接使用

Save this as a preset for future projects? (y/N)

这里敲y保存,并给这个配置命名,然后就开始下载模板啦

上面就是下载完的项目结构,比2.0少了很多文件夹,也没有一大堆webpack的配置文件,这对于很多小白来说,不用一开始就需要理解很多配置,看起来比较清爽。

下面就开始安装element-ui 在cli3.0安装插件也有一些差异,具体请移步官网查看详细文档

这里使用vue add element命令安装element-ui

再选择Fully import

PS:这里需要注意一点,使用vue add安装插件时,应确保当前项目提交最新,因为有可能会覆盖掉app.vue这个文件的部分内容,比如安装element,就会将app.vue的内容增加多一个按钮的显示,如图

那看到这个图,也就说明element-ui安装成功啦,然后就可以在各个组件里面,跟以前一样使用element了!

原文链接:segmentfault.com

上一篇:开发者日报 2019年04月03日
下一篇:知乎视频播放器开源了~

相关推荐

  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    2 个月前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包安装,二到淘宝cpm镜像查看cpm镜像命令:npm install -g cnpm --registry=http...

    1 年前
  • 项目总结 - 构建vue cli3.0+express项目

    简介:本篇是记录搭建流程,不过多叙述,搭建的细节,主要以前端为主,项目是主要是为了重构前端代码,后端代码完全复用,还会有篇主要讲node项目的搭建 项目背景: 一个客服项目,原来是react+expr...

    2 年前
  • 通过SortableJS实现elementUItable拖动效果

    背景 目前elmenetUI的表格是不支持拖动的,但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。

    4 个月前
  • 踩坑记之基于Vue+Element+Koa实现云上存储

    前言最近在做项目等时候,需要处理图片,表格,文本等多种格式的文件到数据库,用传统等方法进行处理既繁琐又比较麻烦,所以第一次尝试使用云上存储等方式来实现。比较了阿里云和腾讯云之类的网站之后,最终选择七牛...

    4 个月前
  • 跟随Element学习Vue小技巧(9)——Radio(下)

    ❝ 我一直都想证明 努力是能够超越天才的 ❞ 前言 我想要杯拿铁您要的是这个吗?额,这个中杯对不起先生,这个是大杯,这个才是中杯你这不是大、中、小三个杯子吗?我要这个中杯对不起先生,那个是大杯...

    1 个月前
  • 跟随Element学习Vue小技巧(36)——Notification

    ❝ 我不想后悔,不想再懊恼 当时为什么没有去做? ❞ 前言 「临时通知:今天没有作业!」 小明,上王者小红,上王者小宇,上王者天天,上王者 滴滴答,滴滴答... 嘟嘟—— 您有新消息,请...

    15 天前
  • 跟随Element学习Vue小技巧(34)——Message

    ❝ 你的包里装的是什么? 是梦想和希望! ❞ 前言 嘟—— 嘟—— 嘟—— 嘟—— ... 最近有谣言说我喜欢你,我特意过来澄清一下,那不是谣言,那是真的为什么朋友圈里都不发我的照片...

    16 天前
  • 跟随Element学习Vue小技巧(29)——Pagination

    ❝ 不管遇到什么事 都要一笑而过 ❞ 前言 一天,0跟8在街上相遇,0不屑的看了8一眼,说:“胖就胖呗,还系什么裤腰带啊” 0碰到10,看了他一眼,不屑地说:“年纪轻轻的,拄什么拐仗呀。

    19 天前

官方社区

扫码加入 JavaScript 社区