导言-大纲

一、vue环境搭建

1. vscode 安装vue 相关插件：vetur：解决template白色问题
2. vscode 安装vue 相关插件：vue.volar：vue代码提示
3. 安装node.js：通过安装 node.js 来获取 npm包管理器
4. 安装yarn：npm install -g yarn 安装 yarn 包管理器。
5. 安装vue脚手架：npm install -g @vue/cli
6. 安装yarn：npm install -g
7. 命令行方式创建项目：vue creare 项目名
   

二、创建项目：vue create

1. 执行命令：vue creare vue-element-admin
2. 选择Vue2 和yarn 环境进行安装：
   
   
   
   这里我没有安装git，所以会爆一个警告。

三、配置element- ui

1. 跟着element官网走
2. npm i element-ui -S

1、完整引入

1. 跟着element官网走

a、修改main.js

import Vue from 'vue'
import ElementUI from 'element-ui';  // 完整引入代码
import 'element-ui/lib/theme-chalk/index.css';  // 完整引入代码
import App from './App.vue'

Vue.config.productionTip = false
Vue.use(ElementUI)					// 完整引入代码

new Vue({
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11

b、修改自带的页面：HelloWorld.vue

<template>
  <div class="hello">
    <el-button>按钮el-button>
  div>
template>
1
2
3
4
5

c、展示

运行命令：npm run serve or yarn run serve

d、打包后大小

1. 执行命令：npm run build，生成 dist文件
2. 查看dist大小，一会对比下面按需打包后的大小。
   
3. 查看dist/js大小，一会对比下面按需打包后的大小。
   

2、 按需引入

1. 跟着element官网走

a、按需引入配置

1. npm install babel-plugin-component -D 官网的按需引入第一个就是引入插件
2. .babelrc 改为

   {
     "presets": [["es2015", { "modules": false }]],
     "plugins": [
       [
         "component",
         {
           "libraryName": "element-ui",
           "styleLibraryName": "theme-chalk"
         }
       ]
     ]
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

b、修改main.js

c、修改自带的页面：HelloWorld.vue

d、展示

可以看到main.js 中的按钮已经引入，单选框没有引入所以只显示文字不显示样式。

e、打包后大小

1. 执行命令：npm run build，生成 dist文件
2. 查看dist大小，与上面的完整引入做对比。
3. 查看dist/js大小，与上面的完整引入做对比。

四、配置vue-router 插件

1. 安装vue-router

1. npm i vue-router@3.2.0

2. 配置 main.js

共有两步

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

import router from './router'.  //  1. 配置的路由

Vue.config.productionTip = false

//Vue.component(Button)
Vue.use(Button)

new Vue({
  router,						//  2. 配置的路由
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. 新建 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
//import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        //component: Home,                              // 第一种方式
        component: () => import('../views/Home.vue')   // 第二种方式
    }
]

const router = new VueRouter({
    mode: 'history',
    routes
})
export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4. 新建 views/Home.vue

<template>
  <div>
    我是home 页面
  div>
template>

<script>
export default {
  name: 'Home',
  data(){
    return {}
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5. 修改 APP.vue

添加组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <router-view>router-view>
  div>
template>
1
2
3
4
5
6
7

6. 截止到现在的项目结构

五、vue-router的 小案例

1. 案例描述

两个按钮，一个Home按钮，一个User按钮
点击Home按钮显示Home 页面，点击User按钮显示User页面
Home页面前面写了，这里就只写User

2. 新建 User.vue

<template>
  <div>
    我是 User 页面
  div>
template>

<script>
export default {
  name: 'User',
  data(){
    return {}
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 修改 router/index.js

新增User页面。

import Vue from 'vue'
import VueRouter from 'vue-router'
import User from '../views/User'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue')   // 第二种方式
    },
    {
        path: '/user',
        name: 'User',
        component: User                                 // 第一种方式
    }
]

const router = new VueRouter({
    mode: 'history',
    routes
})
export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4. 修改 HelloWorld.vue 增加路由跳转

<template>
  <div class="hello">
    <router-link to="/">
      <el-button>Home按钮el-button>
    router-link>
    <router-link to="/user">
     <el-button type="primary">User按钮el-button>
    router-link>
    
    <el-radio v-model="radio" label="1">备选项el-radio>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12

5. 页面展示

1. 点击Home按钮
   
2. 点击User按钮
   

配置中报错信息

1.

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in [eslint] 
/Users/alsc/fengjianchi/web_front/vue_ele_admin/src/views/Home.vue
  9:9  error  Component name "Home" should always be multi-word  vue/multi-word-component-names

✖ 1 problem (1 error, 0 warnings)
1
2
3
4
5
6
7
8

关闭eslint

2. Vue.use()和Vue.component()

Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
1

没有分清use和component的用法
引入vue-router时，我用的use，按说应该是component。
use引入插件，component引入组件
vue中Vue.use与vue.component的区别

3. 按需引入引发的血案

 Property or method "radio" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
1

页面正常，数据正常，没有引入样式的地方是没有样式的，并且控制台会爆这个错误
将那个备选项注释掉即可