vue2.0 项目创建和配置-JZTXT

项目的框架概述：
前端：
1、采用vue2.0
2、采用element ui
后端：
1、Jave

一、前端
1、创建项目

vue create web_admin

创建成功后的项目结构

2、安装element ui指定版本

yarn add element-ui@2.15.12

3、在main.js入口文件引入elementui插件

import Vue from 'vue'
import App from './App.vue'
// 完成版引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.config.productionTip = false

// 安装elementui插件
Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

4、测试elementui是否能正常使用，修改一下默认的HelloWorld.vue组件，从elementui官网复制一下一段代码，放在template中，其他多余的代码删除

<template>
  <div class="hello">
    <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>
  </div>
</template>

运行显示如下图：

5、安装路由，主要指定和vue2匹配的vue-router最新的3版本

yarn add vue-router@3

6、创建views/test目录，创建两个用来测试路由的组件

<template>
    <div>这是部门页面</div>
</template>

<template>
    <div>这是员工页面</div>
</template>

7、创建router目录，创建index.js文件，配置路由

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

import testdept from "../views/test/testdept"
import testemployee from "../views/test/testemployee"

export const constantRoutes=[
    {
        path: "/testdept",
        component: testdept,
    },
    {
        path: "/testemployee",
        component: testemployee,
    },
]
const createRouter = () =>
  new Router({
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
  });

const router = createRouter();


export default router;

8、main.js文件中引用router

import Vue from 'vue'
import App from './App.vue'
// 完成版引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 引入router
import router from './router';


Vue.config.productionTip = false

// 安装elementui插件
Vue.use(ElementUI)


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

9、修改helloworld组件，进行路由切换测试

<template>
  <div class="menu">
    <router-link to="/testdept">部门</router-link>
    <router-link to="/testemployee">员工</router-link>

    <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
  </div>
</template>

效果图如下：