使用ElementUI创建项目
从 0 开始搭建 element 项目
第一步,安装 Nodejs/NPM
第二步,安装 vue-cli
打开 cmd 创建,在命令行下执行命令即可安装:
npm install -g @vue/cli
安装完后,会有一个 vue 命令可以被调用:
vue --version
如果没有,请从第零步重新开始 第二步,创建新的项目
打开 cmd 窗口,切换到相关工作目录: d:
cd wodegongzuomulu
然后,在命令行下,使用 vue 命令创建项目: vue create vue-xiangmu
这时候项目就创建好了,创建好
的项目目录如下:
第三步,增加 ElementUI 的支持
在刚才的命令行下,敲入命令: vue add element
如果有提醒,分别选择: Full Import? Enter
SCSS support? N
ZH-CN
等待完成即可。
第四步,增加 router 支持
在上述的命令行下,敲入命令: vue add router
如果有提醒,选择“回车”,“回车”…. 等待完成即可!
第五步,开始编码。
另外的另外
vue add router 命令等同于: 首先执行 npm install vue-router --save 在 main.js 里添加: // 引进
import Router from 'vue-router'
import Home from './components/Home'
import About from './components/About' // 注册
Vue.use(Router) // 定义
const router = new Router({
base: process.env.BASE_URL,
routes: [
{ path: '/', component: Home },
{ path: '/about, component: About }
]
})
vue add element 命令等同于:
首先,执行 npm install element-ui --save
在 main.js 里配置: import Vue from 'vue';
import App from './App.vue'; // 引入 js + css
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 注册
Vue.use(ElementUI); new Vue({
el: '#app',
render: h => h(App)
});
使用ElementUI创建项目的更多相关文章
- VUE+ElementUI创建项目
1.官网下载node,安装node.js环境 安装完成后进入cmd,输入node -v和npm -v查看node和npm是否安装成功及对应的版本 2.全局安装vue-cli:cnpm install ...
- vue.js+koa2项目实战(一)创建项目和elementUI配置
前端采用vuex+element-ui: 后端采用koa2+restfulAPI+sequlize: (一)项目介绍 宠物社区 1.社区 2.好友 3.说说 4.宠粮 5.健康 (二)项目框架 1.V ...
- vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验
1. 全局安装vue-cli yarn global add @vue/cli // 检查安装是否成功 vue -V // 3.2.2 2. 初始化 vue ui 执行命令 vue ui 2.1 该命 ...
- vue-cli3.0创建项目之完成登录页面
借鉴博客:https://www.cnblogs.com/KenFine/p/10850386.html 接着上一个创建的新项目vue-mydemo01来: 1.创建一个login.vue组件页面:如 ...
- vue-cli3用图形化的方式创建项目
Vue脚手架可以快速生成Vue项目基础的架构. A.安装3.x版本的Vue脚手架: npm install -g @vue/cli B.基于3.x版本的脚手架创建Vue项目: 1).使用命令创建Vue ...
- vue脚手架通过UI界面创建项目
vue脚手架提供了图形界面操作项目,比之前通过命令操作的形式还要简单,以下是使用的步骤: 1.全局安装@vue/cli脚手架工具 npm i @vue/cli -g {使用淘宝镜像:npm insta ...
- 初学Vue.js,用 vue ui 创建项目会不会被鄙视
全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...
- vue+element初始化创建项目
初始化 步骤1:选择开发框架并创建 步骤1:vue create shop 回车步骤2:安装方式选择第二个自定义步骤3:安装模块: (*) Babel ( ) TypeScript ( ) Pro ...
- 基于electron+vue+element构建项目模板之【创建项目篇】
1.概述 electron:使用javascript.css.html构建跨平台的桌面应用程序 vue:数据驱动视图中的一款渐进式的javascript框架 element:基于vue的桌面端UI组件 ...
随机推荐
- 安装gitlab ce
切换到root用户,安装相关依赖 yum install curl policycoreutils openssh-server openssh-clients service sshd restar ...
- WPF中Brush类型
画刷Brush使用 画刷类 SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush VisualBrush Drawing ...
- 客户端相关知识学习(四)之H5页面如何嵌套到APP中
Android原生如何渲染H5页面 Android与 H5 的交互方式大概有以下 1 种: 利用WebView进行交互(系统API) iOS原生如何渲染H5页面 iOS 与 H5 的交互方式大概有以下 ...
- MySQL中自定义排序
在开发时候,我们经常使用的是默认的排序规则,但在某些特殊情况下,通过指定顺序来进行排序 -- fileld自定义排序时,应该是非主键的,否则主键是无效 SELECT * FROM customer W ...
- js获取7天之前的日期或者7天之后的日期
js获取7天之前的日期或者7天之后的日期(网上摘取的,记录自己使用) function fun_date(num) { var date1 = new Date(); //今天时间 var time1 ...
- 特产网站自适应CSS
下面是一个特产网站自适应CSS,这个特产自适应CSS通过屏幕宽度大小来进行适应的,而不是根据UA来判断,就加快了判断的速度,所以速度很快 中国特产站排名还是很好的,特别是手机端 li { list-s ...
- java 语言多线程可见性(synchronized 和 volatile 学习)
共享变量可见性实现的原理 java 语言层面支持的可见性实现方式: synchronized volatile 1. synchronized 的两条规定: 1 线程解锁前,必须把共享变量的最新值刷新 ...
- linux 指定ftp用户 特定目录及权限
Linux添加FTP用户并设置权限 在linux中添加ftp用户,并设置相应的权限,操作步骤如下: 1.环境:ftp为vsftp.被限制用户名为test.被限制路径为/home/test 2.建 ...
- Hibrenate实现根据实体类自动创建表或添加字段
Hibernate支持自动建表,在开发阶段很方便,可以保证hbm与数据库表结构的自动同步. 实现: 在配置hibernate的配置文件中将hbm2ddl.auto设置为update,如:Xml代码&l ...
- Linux: df du
df :列出文件系统的整体磁盘使用量 du :评估文件系统的磁盘使用量(常用在推估目录所占容量) 1 df :[-ahikHTm] 目录或文件名 选项或参数: -a: 列出所有的文件系统,包括系统 ...