通过cmd和npm指令,快速引入element-ui组件
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
如何通过 cmd
和 npm
指令,在新建 vue.js
项目中,快速引入 Element-ui
组件 ?
范例 - 项目路径截图参考:
流程说明:
-
新建项目文件夹,命名如:
m2-vue-element
-
启动
cmd
,依次执行命令:cd c:\xxx\vuejs
vue init webpack m2-vue-element
- 之后,进行项目基本配置
cd m2-vue-element
npm install
npm run dev
-
再次启动
cmd
(当然你也可以紧接上面的第4或第5条指令后面,直接执行下面的第2条指令),执行命令:-
cd c:\xxx\vuejs\m2-vue-element
-
npm i element-ui -S
截图如下所示例:
-
-
打开项目文件夹,找到文件
C:\xxx\vuejs\m2-vue-element\src\main.js
,
分别添加如下的代码片段:import ElementUI from 'element-ui' //样式文件,需单独引入 import 'element-ui/lib/theme-chalk/index.css' //旧版本中,也许是theme-default,请自行检查填写
Vue.use(ElementUI)
**修改后**的代码片段为:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' //样式文件,需单独引入 import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false /* eslint-disable no-new */ Vue.use(ElementUI) new Vue({ el: '#app', router, ···省略···
-
之后,打开浏览器,(
main.js
端口已设置为8085
),输入IP地址:http://localhost:8085
,若不出错,显示结果为下图,则表示组件安装搭建成功。
以上就是关于“新建vue.js项目快速引入element-ui组件流程介绍”全部内容。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献27条内容
所有评论(0)