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 ...
随机推荐
- angular(一)
angularjs第一章•angluarjs介绍·什么是angularjs•AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法 ...
- super()函数的用法
http://www.runoob.com/python/python-func-super.html class FooParent(object): def __init__(self): sel ...
- SmokePing安装手册
SmokePing安装部署 SmokePing简介 Smokeping是一款用于网络性能监测的开源监控软件,主要用于对IDC的网络状况,网络质量,稳定性等做检测,通过rrdtool制图方式,图形化地展 ...
- add() 方法用于向 <select> 添加一个 <option> 元素。
//add() 方法用于向 <select> 添加一个 <option> 元素. //new Option() 创建一个option标签 school.add(new Opti ...
- Flask之flask-script
简介 Flask-Scropt插件为在Flask里编写额外的脚本提供了支持.这包括运行一个开发服务器,一个定制的Python命令行,用于执行初始化数据库.定时任务和其他属于web应用之外的命令行任务的 ...
- 使用jQuery创建节点、将节点插入到指定的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 如何设计Spring读取某种文件的逻辑顺序
1. 判断系统属性System.getProperty("apdb.config.path", "");,有的话,优先使用.(系统属性可以在命令行中以 -D&l ...
- Vim 我用的python相关插件
1. pydoc.vim(https://github.com/vim-scripts/pydoc.vim) 查找python文档. 使用方法: :Pydoc <keyword> ...
- 微信公众号JSAPI支付
微信公众号JSAPI支付 一:配置参数 申请成功后,获取接口文件, 将所有文件放入项目根目录weixin下,在WxPay.ub.config.php中填入配置账户信息; 二:设置授权 开发者中心-&g ...
- Element 中表单非必填数据项 必须为数字的验证问题
Element-ui 的el-form组建中,自带基本的验证功能,比如某些项必填的验证,直接加入rules 规则中即可,如下实例: 在页面中书写如下: <el-form-item label=& ...