在VUE-CLI 3下的第一个Element-ui项目(菜鸟专用)

一、
今天第一次试用了vue-cli 3 来写我的第一个基于Element-ui的项目,我会从项目的创建到项目的运行尽可能详细的给大家讲一遍。
二、安装及创建
1.可以使用下列的命令进行安装

npm install -g @vue/cli
yarn global add @vue/cli  #mac推荐使用

应为没用过yarn,我在这里使用的是常用的npm,如果安装速度过慢,可以选择使用淘宝镜像进行安装。

npm install -g @vue/cli cnpm --registry=https://registry.npm.taobao.org

2.完成以上步骤之后,就可以开始创建项目了

F:\>vue create aha-wts-test

然后出现以下信息

Vue CLI v3.0.5
? Please pick a preset:

mock (vue-router, vuex, sass, babel, typescript, eslint, unit-jest, e2e-cypress) # 这是我之前创建的项目并保存它的配置,详情可看这里
default (babel, eslint) # 默认创建。因为不太清楚它是否具备了该有的功能和组件,所以我选择了下面那个
Manually select features # 自定义创建

在VUE-CLI 3下的第一个Element-ui项目(菜鸟专用)_第1张图片
按空格进行勾选

  1. Bable 预编译 勾选
  2. TypeScript 微软做的,用到的勾选
  3. Progressive Web App (PWA) Support 优化用的,用到的勾选
  4. Router 路由 勾选
  5. Vuex 勾选
  6. CSS Pre-processors CSS预处理器 勾选
  7. Linter/Formatter 代码格式化
  8. Unit Testing 单元测试
  9. E2E Testing E2E测试

在VUE-CLI 3下的第一个Element-ui项目(菜鸟专用)_第2张图片

这是检验标准,配合VScode
个人推荐第一种和第四种


接下来选择

  1. lint on save
  2. in package.json (个人习惯)
  3. 选择是否保存自己的习惯
  4. 等待创建

三、引用基于vue-cli@3的Element组件
在这里要使用到vue-cli@3下的Element的组件
特别方便
创建好项目后输入

vue add element

会出现以下提示

? How do you want to import Element? (Use arrow keys)

为了方便,选择第一个全局引用:fully import

  1. ? Do you wish to overwrite Element's SCSS variables? Yes
  2. Choose the locale you want to load zh-CN

到这一步之后,就可以开始开荒了
在VUE-CLI 3下的第一个Element-ui项目(菜鸟专用)_第3张图片
的确精简了许多

npm run serve

目录结构可参考:点击这里

你可能感兴趣的:(在VUE-CLI 3下的第一个Element-ui项目(菜鸟专用))