mac下搭建基于vue-cli 3.0的Element UI 项目
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 项目的更多相关文章
- VUE CLI 3.0 安装及创建项目
一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/ 详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- 基于Vue.js 2.0 + Vuex打造微信项目
一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- Mac下搭建基于PlatformIO的嵌入式开发环境(STM32开发)
PlatformIO简介 PlatformIO是开源的物联网开发生态系统.提供跨平台的代码构建器.集成开发环境(IDE),兼容 Arduino,ESP8266和mbed等 支持在Windows.Lin ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
- Mac下搭建hexo3.0博客
Mac下搭建hexo3.0博客(文章同步自个人博客站点以及Github博客https://xingstarx.github.io/) window环境下搭建hexo博客 详细内容能够參考这一篇文章怎样 ...
- Mac 上搭建基于 Hexo + GitHub 个人博客
环境配置 本人电脑系统:macOS Node.js 生成静态页面.安装Node.js Git 用于将本地 Hexo 内容提交到 Github.Xcode自带Git(前提:macOS已经安装了Xcode ...
- Django + Vue cli 3.0 访问静态资源问题
[问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...
随机推荐
- 新团建立时间 timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
w 不根据当前时间戳更新. `wtime` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
- c++ socket相关
http://blog.sina.com.cn/s/blog_43ad62c70100gtow.html,一个简单的C语言的socket服务器和客户端程序 http://www.cnblogs.com ...
- 剑指Offer——构建乘积数组
题目描述: 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1]. ...
- 自建YUM仓库
YUM主要用于自动安装.升级rpm软件包,它能自动查找并解决rpm包之间的依赖关系. 要成功的使用YUM工具安装更新软件或系统,就需要有一个包含各种rpm软件包的repository(软件仓库),这个 ...
- Unmet dependencies. Try 'apt-get -f install' with no packages
在ubuntu14.04上用sudo apt-get install percona-xtrabackup安装xtrabackup时提示 zhj@my-SERVER:~$ sudo apt-get i ...
- C++实现去掉string字符串前后的空白字符
C++标准库提供的字符串类string没有提供类似CString中Trim方法,该方法功能为去除字符串前后的空白字符.利用string自身一些方法可以很容易实现该功能. 如下: void Trim(s ...
- 微信小程序组件slider
表单组件slider:官方文档 Demo Code: var pageData = {} for (var i = 1; i < 5; i++) { (function (index) { pa ...
- javascript 对象 原型 prototype
- filebeat+logstash通过zabbix微信报警
一.安装软件: 1.在要收集日志的机器上安装filebeat: 1).下载安装: cd /usr/local/src wget https://artifacts.elastic.co/downloa ...
- LinQ高级查询、组合查询、IQueryable集合类型
LinQ高级查询: 1.模糊查询(包含) Repeater1.DataSource = con.car.Where(r =>r.name.Contains(s)).ToList(); 2.开头 ...