Vue实践基础整理

最近在阅读项目源码并系统学习SpringBoot+Vue的经典开发架构，但今天打开之前写的后端代码发现还是有好多已经忘记了，就决定停下脚步先将本周遇到的问题总结下来，方便以后复习查看。

1. Vue项目开启

初始化

#进入工程目录
vue init webpack 项目名
#添加相关依赖文件
npm install
#注意不同的项目可能需要不同的依赖，运行已经完成的项目只需要点击让IDE自动补全即可，会按照package-lock.json中的自动下载，当然初始化的新项目就需要自己安装了

npm install webpack -g
npm install webpack-cli -g
//其他命令这里不再一一列出

安装时注意，警告不用管就行，不要随便使用force修复

基本架构

build–构造文件
config–配置文件
node_modules–依赖（与package-lock.json配套使用，相当于从其中下载，类似于maven）
scr
- assets：用于存放资源文件
- components：用于存放Vue功能组件
- views：用于存放Vue视图组件
- router：用于存放vue-router配置
- APP.vue–页面入口文件vue的根组件
- main.js–程序入口文件（入口js文件）
package.json–里面有程序运行指令，可点击

注意在Vue中 @/… 路径通常表示的是引用src根目录上述四个部分均属于此根目录

vue文件格式

APP.vue
<template>
  用于写HTML格式的前端文件
</template>

<script>
导入vue文件，或者直接new，这里本质是写js的地方
import HelloWorld from './components/HelloWorld'

export default {
  //板块默认指定输出，方便其他组件引入
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
css文件位置
</style>

2. Vue整合UI框架开发

整合element-ui

安装

npm i element-ui -S

修改main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)

3.使用

<template>
<div class="hello">
<h1>{
   
   { msg }} </h1>
<h2>Essential Links </h2>
<el-button>默认按钮 </el-button>
<el-button type="primary">主要按钮 </el-button>
<el-button type="text">文字按钮 </el-button>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

运行成功！

细节

注意APP.vue中最好要使用自闭合标签来插入组件

<Login/>

vue文件中的子元素只能有一个，有两个的话需要加上

<div></div>

组件调用名称注意

template 中引用的自闭和标签是子组件对外的名字，加入后系统会自动import
HelloWorld==hello-world

3. Vue基础UI组件使用

本部分建议结合官方文档与实例学习

el-dialog使用

这是el中的对话框

触发启动对话框
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog  :visible.sync="dialogVisible" width="900px">
.....可以插入内容....
</el-dialog>
注意要初始化dialogVisible
<script>
export default {
  name: 'add-nodes',
  data () {
    return {
      dialogVisible: false
    }
  }
}
</script>

基本使用和属性介绍

:visible.sync=属性绑定显示与隐藏//这个很重要是对话框出现与否的关键

el-form使用

表单验证

<el-form  :model="nodesForm"  ref="nodesForm"  label-width="100px" class="demo-ruleForm">
      <div class="node-model-content" style="padding-left: 0">
      <div >
          <el-form-item label="IP:" :prop="index + '.ip'" style="display: inline-block" :rules="[]">
            <el-input  style="width: 150px;" maxlength="16"></el-input>
          </el-form-item>
     </div>
      </div>
    </el-form>
    中间可以加入div和el-form-item

基本使用和属性介绍

:model  整个表单填写的数据结构形式
ref：绑定后可在后面js中使用$refs
label-width宽度
class分类

子元素

<el-form-item label="IP:" :prop="index + '.ip'" style="display: inline-block" :rules="[]">
          <el-input  style="width: 150px;" maxlength="16"></el-input>
          </el-form-item>

label:显示标签
prop：传入form的model的字段
style="display: inline-block;"
处理行内非替换元素的高宽问题：
rules：检查规则

行内非替换元素，比如duspan、a等标签，正常情况下士不能设zhi置宽高的，加上该属性之后，就可以触发让这类标签表现得如块级元素一样，可以设置宽高。

将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

4. Vue路由设置

路由中有三个基本的概念 route, routes, router

route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。
routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

创建简单的路由结构

1.router index.js

总结简单的路由结构

1.创建文件夹router，创建js文件index.js

import Vue from "vue";
import Router from "vue-router";
//注意在引入的过程中可能需要下载依赖

import HiWorld from "../components/HiWorld";
import AddNodes from "../components/add-nodes";
//导入组件时候会自动导包

Vue.use(Router);
const routes = [
  {
    path:"/home",
    component: HiWorld
  },
  {
    path: "/add-nodes",
    component:AddNodes
  },
 
    path: '/',
    redirect: '/home'
  }
]
var router =  new Router({
  routes
});
export default router;

2.修改main.js文件

import Vue from 'vue'
import App from './App'

import router from "./router"

Vue.config.productionTip = false
//加入该行，并在new中加入router
Vue.use(router);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router,
})

3.APP.vue使用路由即可

 <!-- router-link 定义点击后导航到哪个路径下 -->
<router-link to="/add-nodes">add-nodes</router-link>
<router-view></router-view>
 <!-- 或者直接输入路径跳转 -->

懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

component:resolve => require(['@/views/components/help'],resolve)

#问题

vue 项目往往会搭配 vue-router 官方路由管理器，vue-router 默认为 hash 模式，浏览器 URL 地址中会有一个 # 只要更换 vue-router 的另一个模式 history 模式即可(router内的index.js设置)

var router =  new Router({
  mode:'history',
  routes
});
export default router;