Vue工程整合ElementUi

Vue工程整合ElementUi

1.Mac版本:使用VScode编辑Vue工程权限不够，修改文件的权限：截图如下

2.Vue工程目录结构

3.npm安装Element-UI

npm i element-ui

4.在main.js中导入ElementUI以及样式库

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

Vue.use(ElementUI);

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

5.写Hello.vue

<template>
    <div>
            <h1>你好，Hello,{{name}}</h1>
             <el-radio v-model="radio" label="1">备选项</el-radio>
             <el-radio v-model="radio" label="2">备选项</el-radio>
    </div>
</template>

<script>
export default {
    data(){
        return{
            name: "张三",
            radio: "2"
        };
    }
    
};
</script>

<style>

</style>

6.配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
// @代表src根目录

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello    //Hello.vue
    }
  ]
})

7.配置首页 App

<template>
  <div id="app">
    <img src="./assets/logo.png">
      <router-link to="/hello">去Hello</router-link>     <!-- 跳转连接 -->
      <router-link to="/">去首页</router-link>
    <!-- 路由视图 -->
    <router-view/>
      
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

8.启动Vue工程

npm run dev

去首页

去Hello

问题：只改变下半部分不改变上半部分的原因是:App.vue
中的router-view可以控制路由的视图，只改变路由的视图。

<template>
  <div id="app">
    <img src="./assets/logo.png">
      <router-link to="/hello">去Hello</router-link>     <!-- 跳转连接 -->
      <router-link to="/">去首页</router-link>
    <!-- 路由视图 -->
    <router-view/>
  </div>
</template>