vue 笔记（十四）vue+elementUI

ElementUI是饿了么基于 Vue 2.0 的桌面端组件库，https://element.eleme.cn/#/zh-CN/component/installation

下面进入实战，根据之前创建Vue-cli   笔记（十一）一样再来一遍创建项目

1.创建工程，在文件夹下打开cmd

即初始化一个叫 hello-vue 的项目

 一路选 no，选第一个，nonono，选最后一个自己安装

会生成下面的文件

2.然后安装插件组件

# 进入hello-vue的工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev	

3.创建成功后用idea打开，并删除净东西 创建views和router文件夹用来存放视图和路由

4.router目录下新建index.js

//导入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
  routes: [
    {
      //登录页
      path: '/main',
      component: Main
    },
    //首页
    {
      path: '/login',
      component: Login
    },
  ]


})

5.login.vue 里

6.main.js 里配置  导入所有

import Vue from 'vue'
import App from './App'
import router from './router'
// 导入elementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(router);
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render:h=>h(App)  //ElementUI
})

7.App.js

8.运行的结果