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. 剑指Offer——数组中只出现一次的数字

    题目描述: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 分析: 数组中一共有偶数个数.两个数字只出现过一次. 相同数异或在一起等于0,那么将所有数异或 ...

  2. 【c++】生成浮点随机数

    c++11:std::uniform_real_distribution<>直接求(尖括号不填默认生成double) 随机10个在1-2之间的浮点数 #include <random ...

  3. SSM框架关于后台返回JSON数据中显示很多不需要的字段为NULL

    xml 配置 spring mvc 的 json 返回忽略 null 字段 <mvc:annotation-driven> <mvc:message-converters regis ...

  4. sql之密码保存

    HashBytes (Transact-SQL) 其他版本   返回其输入的 MD2.MD4.MD5.SHA 或 SHA1 哈希值.  Transact-SQL 语法约定 语法         Has ...

  5. ReSharper Ultimate 2017 下载地址及破解方法

    https://download.jetbrains.8686c.com/resharper/JetBrains.ReSharperUltimate.2017.1.2.exe 安装完成后,打开vs   ...

  6. PHP代码编写的优化

    // $b 会新创建一个内存空间 $a = array('a'=>'aa','b'=>'bb'); $b = $a; $a['c'] = 'cc'; // $b 会引用 $a 的内存空间 ...

  7. mysql 锁相关的视图(未整理)

    mysql 锁相关的视图 查看事务,以及事务对应的线程ID   如果发生堵塞.死锁等可以执行kill  线程ID  杀死线程      kill  199 SELECT * FROM informat ...

  8. 关于在MFC的视图类里面添加各种控件 以及给这些控件添加对用的函数。2015-03-24 13:46:00

    首先我们把题目所示的要求分为两个问题: 问题一:如何给基于MFC的单文档视图类里面添加 控件.就是那种类似工具箱里面的控件. 问题二:如何给已经添加的控件 定义一些消息的响应函数. ××××××××× ...

  9. PATH and CLASSPATH

    PATH and CLASSPATH 1. 可以不设置PATH直接运行Java应用的.PATH的设置只是为了使用上的方便. 2. PATH设置的是Java的bin目录,使得bin目录下的可执行程序能够 ...

  10. Multiple encodings set for module chunk explatform "GBK" will be used by compiler

    项目用idea启动的时候,突然报了个这个 Multiple encodings set for module explatform "GBK" will be used by co ...