Vue项目整合Element-ui


我使用的是WebStorm来新建Vue项目:

新建Vue项目

选择项都选择默认就行,最后新项目目录如下图所示:

新Vue项目目录

点击上图中红色框选出的"Terminal"打开终端

执行 “npm instal element-ui --save” 将Element-UI依赖添加到项目中去

整合Element-UI

想知道是否添加成功,可以进入“package.json”文件查看是否有element-ui版本信息

确认已整合Element-UI至项目

最后进入“main.js"文件中,添加以下代码方可使用Element-UI:

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

删除掉的“element-ui/lib/theme-default/index.css”是老版本Element-UI的引入路径,已经失效;新的路径是下面的“element-ui/lib/theme-chalk/index.css”

main.js引入Element-UI

在新项目自动生成的HelloWorld.vue中使用Element-UI新建一个,并新建一个普通

你可能感兴趣的:(Vue项目整合Element-ui)