1.安装yarn管理工具(包含node.js);

2.安装全局vue-cli全家桶:

yarn global add @vue/cli

3.创建、测试一个vue-cli项目:

vue create admin

默认会提示选择那些安装:

Vue CLI v3.3.0
? Please pick a preset: (Use arrow keys)
❯ project1 (vue-router, vuex, sass, babel, pwa, eslint) #这里是我之前创建项目并保持了他的配置(Save preset as: xxxx)
default (babel, eslint) #默认创建,因为不太清楚它是否具备了该有的功能和组件,索引自己选择了下面自定义安装
Manually select features #自定义创建

按空个进行勾选:

  • Bable 预编译
  • TypeScript
  • Progressive Web App (PWA) Support 优化用的
  • Router 路由
  • Vuex
  • CSS Pre-processors CSS预处理器
  • Linter/Formatter 代码格式化
  • Unit Testing 单元测试
  • E2E Testing E2E测试

接着是一些细化的选择,详情可以看上图,其中最后一步提示是否作为一个默认候选创建包,可以结合自己需要设定作为一个创建模板(即前面提及的project1);

4.基于vue-cli@3引入element组件

创建好项目之后,切换到目录内:

vue add element

会出现以下提示:

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

为了方便,可以选择全局引用:full import

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

之后就可以通过命令yarn serve编译、运行网站了

mac下搭建基于vue-cli 3.0的Element UI 项目的更多相关文章

  1. VUE CLI 3.0 安装及创建项目

    一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/   详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...

  2. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  3. 基于Vue.js 2.0 + Vuex打造微信项目

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

  4. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  5. Mac下搭建基于PlatformIO的嵌入式开发环境(STM32开发)

    PlatformIO简介 PlatformIO是开源的物联网开发生态系统.提供跨平台的代码构建器.集成开发环境(IDE),兼容 Arduino,ESP8266和mbed等 支持在Windows.Lin ...

  6. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

  7. Mac下搭建hexo3.0博客

    Mac下搭建hexo3.0博客(文章同步自个人博客站点以及Github博客https://xingstarx.github.io/) window环境下搭建hexo博客 详细内容能够參考这一篇文章怎样 ...

  8. Mac 上搭建基于 Hexo + GitHub 个人博客

    环境配置 本人电脑系统:macOS Node.js 生成静态页面.安装Node.js Git 用于将本地 Hexo 内容提交到 Github.Xcode自带Git(前提:macOS已经安装了Xcode ...

  9. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

随机推荐

  1. Spark源码分析 – SchedulerBackend

    SchedulerBackend, 两个任务, 申请资源和task执行和管理 对于SparkDeploySchedulerBackend, 基于actor模式, 主要就是启动和管理两个actor De ...

  2. Zipline Risk and Performance Metrics

    Risk and Performance Metrics 风险和性能指标 The risk and performance metrics are summarizing values calcula ...

  3. 剑指Offer——整数中1出现的次数(从1到n整数中1出现的次数)

    题目描述: 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了 ...

  4. PCI 设备详解一

    2016-10-09 其实之前是简单学习过PCI设备的相关知识,但是总感觉 自己的理解很函数,很多东西说不清楚,正好今天接着写这篇文章自己重新梳理一下,文章想要分为三部分,首先介绍PCI设备硬件相关的 ...

  5. (0.2.7)Mysql安装——多实例安装

    (0.2.6)Mysql安装——多实例安装 待完善

  6. CentOS6.5之Zabbix3.2.2 Server安装、汉化及Agent安装

    1.安装MySQL 1.1.安装MySQL rpm -ivh http://dev.mysql.com/get/mysql-community-release-el6-5.noarch.rpm yum ...

  7. WSDL(WebService描述语言)文件介绍

    一.WSDL 1.WSDL 文档的组成部分 <portType>:web service 执行的操作 <message>:web service 使用的消息 <types ...

  8. Guid ToString 格式知多少?

    在日常编程中,Guid是比较常用的,最常见的使用就是如下所示: string id = Guid.NewGuid().ToString(); 这条语句会生成一个新的Guid并转成字符串,如下: // ...

  9. Web UI 自动化单个xpath抓取插件详解

    原文地址http://blog.csdn.net/kaka1121/article/details/51878346 单个控件获取 需求: 右键到某个控件上,就能获取到至多三个可以唯一定位该元素的相对 ...

  10. python全栈开发从入门到放弃之socket并发编程多线程

    一 threading模块介绍 multiprocess模块的完全模仿了threading模块的接口,二者在使用层面,有很大的相似性,因而不再详细介绍 二 开启线程的两种方式 from threadi ...