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. 003-shell 传递参数

    一.概述 可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 二.实例 以下实例我们向 ...

  2. go-008-循环语句

    一.循环语句[只有for] 1.基础结构: Go语言的For循环有3中形式,只有其中的一种使用分号. 和 C 语言的 for 一样: for init; condition; post { } 和 C ...

  3. HBase在HDFS上的目录树

    众所周知,HBase 是天生就是架设在 HDFS 上,在这个分布式文件系统中,HBase 是怎么去构建自己的目录树的呢? 这里只介绍系统级别的目录树: 一.0.94-cdh4.2.1版本 系统级别的一 ...

  4. PAT 1048 Find Coins[比较]

    1048 Find Coins (25 分) Eva loves to collect coins from all over the universe, including some other p ...

  5. Debian中安装使用sudo命令

     Debian中安装使用sudo命令  sudo可以让非root用户具有管理员的权限,安装好的Debian后还不能使用sudo,需要使用root用户登陆后安装sudo命令.#apt-get insta ...

  6. libxml2 在mingw中 xmlfree连接错误问题

    libxml2 在mingw中 xmlfree连接错误问题 2013年10月02日 ⁄ 综合 ⁄ 共 1527字 ⁄ 字号 小 中 大 ⁄ 评论关闭 原地址:http://blog.csdn.net/ ...

  7. 搜狗员工用百度算什么,谷歌员工当着老板的面用bing,结果悲剧了!

    之前看到一篇文章,写的是搜狗的员工遇到问题时,用百度,结果网友的评论真是亮瞎眼.今天,W3Cschool小师妹将为大家分享一个类似的故事,那就是谷歌员工当着老板的面,竟然用BING. 这位谷歌员工称, ...

  8. SQL Server创建视图——视图的作用

    视图简介: 视图可以看作定义在SQL Server上的虚拟表.视图正如其名字的含义一样,是另一种查看数据的入口. 常规视图本身并不存储实际的数据,而仅仅是由SELECT语句组成的查询定义的虚拟表 . ...

  9. CentOS 6.5上安装python2.7、pip以及Python命令行补全和yum冲突解决

    目前CentOS6.5上自带的python版本为2.6,升级到python2.7会碰到很多问题.本文将介绍如何安装python2.7.pip以及python命令行补全. 一.如何安装python2.7 ...

  10. cocos2d: fullPathForFilename: No file found at /cc_2x2_white_image. Possible missing file.

    程序运行的时候输出这条信息cocos2d: fullPathForFilename: No file found at /cc_2x2_white_image. Possible missing fi ...