网站定制开发什么意思,城乡和住房建设厅网站,自助餐团购网站建设,网站建设与维护教学视频教程ElementUI简直是css学得不好的同学的福音
ElementUI官网#xff1a; Element - The worlds most popular Vue UI framework 安装
在vue文件下#xff0c;用这个命令去安装Element UI。
npm i element-ui -S
step1\先切换到vue的目录下去#xff0c;注意这里面的WARN不是…ElementUI简直是css学得不好的同学的福音
ElementUI官网 Element - The worlds most popular Vue UI framework 安装
在vue文件下用这个命令去安装Element UI。
npm i element-ui -S
step1\先切换到vue的目录下去注意这里面的WARN不是报错。红框里的内容提示我们此时添加了九个包。 然后在node_modules里能看到element-ui的安装包 引入
在main.js中引用代码在原有代码基础上再添加这三行即可
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);
然后新建一个名叫Element.vue的页面 然后页面中输入以下代码
templatedivel-rowel-col :span12div stylewidth:100%;height:300px;background-color:dodgerblue/div/el-colel-col :span12div stylewidth:100%;height:300px;background-color:red/div/el-col /el-row/div/template 此时启动该文件的运行有以下几种方法
1、在我博客《vue2入门》结尾处写了如何配置启动的快捷方式 2、在终端输入命令运行
MacBook-Pro-2 vue % npm run serve看到这样的结果就算是运行成功了 而此时我们还要添加路由才能访问到Element.vue
在router/index.js文件const routes下添加路由 {path: /element,name: Element,// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () import(/* webpackChunkName: about */ ../views/Element.vue)}
然后直接在地址栏里加上/Element 然后自己多去官网看文档就好了。
