新手如何快速上手vue框架

1 什么是vue框架？

    前段时间做了几个项目，开发了几套系统，从而接触到了vue这个前端框架，应该算是上手了吧，基本功能掌握差不多了。想要上手一个框架，那首先肯定得知道这个框架是什么吧？那vue框架是什么呢？

    好吧，官网这么说的：vue框架是渐进式JavaScript框架，易学易用，性能出色，应用场景丰富的web前端框架。

    Vue 由中国的开发者尤雨溪创立，是一款用于构建用户界面的JavaScript框架，它基于标准 HTML、CSS和 JavaScript 构建，并提供了声明式的、组件化的编程模型。Vue 可以高效地开发各种用户界面，无论简单还是复杂，都能够应对自如。它被设计为可以自底向上逐层应用，核心库专注于视图层，易于上手，同时也能与第三方库或已有项目整合。Vue 的生态系统完整，包含了路由库、状态管理等支持类库，使其成为构建复杂单页应用的理想选择。

    Vue 是轻量级的渐进式框架，主张“最少”原则，即尽可能少地侵入业务逻辑，而是通过双边数据绑定（MVVM）来实现数据与视图的动态关联。这使得开发者无需手动操作 DOM 节点，而是可以通过编写简单的模板语法和指令来构建界面。MVVM 其实表示的是 View-ViewModel-Model，就是视图层-视图模型层-模型层。View是作为视图层，简单来说可以把它理解为HTML页面；Model 是作为模型层，它是负责处理业务逻辑以及和服务器端进行交互的；ViewModel 是作为视图模型层，也就是 Vue 框架所起到的作用了，主要是作为 View 层和 Model 层之间的通信桥梁。

    尽管 Vue 在某些方面可能不如 Angular 或 React 那么成熟，但它仍然拥有庞大的社区支持和广泛的使用案例，尤其在中小型项目中表现突出。总的来说，Vue 是一款适合多种规模项目的用户界面框架，以其易学性、高性能和灵活性而受到开发者的青睐。

2 vue框架的安装配置

    想要快速入手vue框架，最好的方法还是开发一个项目，在开发的过程中不断学习，不断丰富自己vue框架知识，增加自己的开发经验，加深对vue框架的理解。

    为了快速的创建项目，自动化地搭建一个项目框架，我们需要使用vue脚手架。Vue-cli是基于Vue的应用开发提供的一个标准的脚手架工具。为应用搭建基础的框架结构，提供插件、开发服务、Preset、构建打包功能。

    安装vue-cli之前，首先检查下电脑是否已经安装nodejs和npm（注：npm下载某些资源时会出现下载速度过慢导致下载失败的情况，所以建议使用国内一些常用镜像源。这里我使用的事淘宝的镜像源，npm install -g cnpm --registry=https://registry.npm.taobao.org）。

2.1 全局安装vue-cli

cnpm install --global vue-cli

2.2 测试是否成功安装

vue -V 

2.3 创建一个基于 webpack 模板的新项目 

vue init webpack my-project

    此时，你已经利用vue脚手架成功的创建一个vue项目，项目内容如下：

项目文件夹主要功能用途： 

build	webpack的基本配置，webpack.base.conf.js
config	构建配置目录，项目启动的端口号
node_modules	依赖node的工具包，及node install xxx都在这里
src	项目核心包
Index.html	入口页面
package.json	项目下载包信息
Index.js	路由信息

     其中，src是项目的核心文件夹，我们项目开发新建的组件、静态文件和路由配置等文件均在其中，是我们操作最频繁，最重要的文件。

2.4 运行项目

    进入项目目录，执行命令npm run dev即可运行初建项目，进入vue初始系统。

3 vue框架开发

    在进行vue框架开发之前，首先介绍一款vue开发工具HBuilder，HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

    话不多说，首先新建一个公共组件，test.vue，其中template中是vue的view视图部分，style中是页面布局格式内容，script是我们的model数据模型和ViewModel 视图模型部分（data中主要是model数据模型，methods主要是视图模型），需要在data中声明数据才能在view视图部分进行调用。

    实现效果：

    简单不？一个简单的基于vue框架的系统界面就实现了。 

    当然，要先实现创建的vue组件在系统前端显示，还需要在index.js中设置路由。首先，引用我们创建的vue组件：

import test from '@/components/test'

    然后 ，需要在路由设置中设置路由跳转的路径名称和组件，使其能够一一对应。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/test',
      name:'test',
      component:test
    },

  ]
})

 路由跳转

    毫无疑问，我们不可能在一个项目只使用一个vue就实现所有的界面功能，当面对多个vue组件时，往往需要路由跳转设置连实现不同界面间的跳转。

    首先需要在路由设置界面引用定义好所有的vue组件，然后我们需要在vue组件中进行路由跳转设置。

<DropdownMenu slot="list">
          <DropdownItem @click.native="rout1"><Icon type="ios-cloud-upload"></Icon>页面1</DropdownItem>
          <DropdownItem @click.native="rout2"><Icon type="ios-cog"></Icon></Icon>页面2</DropdownItem>
          <DropdownItem @click.native="rout3"><Icon type="ios-calendar"></Icon>页面3</DropdownItem>
          <DropdownItem @click.native="rout4"><Icon type="ios-folder"></Icon>页面4</DropdownItem>
       </DropdownMenu>

然后在methods中定义路由跳转函数 ：

rout1:function(){
    this.$router.push('/yemian1')
},
rout2:function(){
    this.$router.push('/yemian2')
},
rout3:function(){
    this.$router.push('/yemian3')
},
rout4:function(){
    this.$router.push('/yemian4')
},

V-指令

    Vue有8中常见的v指令。指令是带有v-前缀的特殊属性。通过指令来操作DOM元素。

    在此简单掩饰下其中几个v指令的功能： 

<template>
  <div id="app" class="app">
      <div v-text="message"></div>
      <div v-html="message"></div>
      <div v-text="url"></div>
      <div v-html="url"></div>
      <button v-on:click="changeflag">点击</button>
      <div v-if="flag ==1">{{message}}</div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      message: '<h1>菜鸟教程!!!!</h1>',
      url:"<a href='https://baidu.com'>百度一下</a>",
      flag:0
    }
  },
  methods:{
    changeflag(){
      if(this.flag==0){
        this.flag = 1
      }else{
        this.flag=0
      }
    },
  },
}
</script>

    效果：从此可以v-text和v-html的区别，v-html会解析标签字符串，v-text则不能；v-on:click可以绑定方法，v-if则进行条件判断，实现标签的创建与销毁。

生命周期函数 

    生命周期是个啥？简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期。生命周期函数又是啥？从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！

    在vue运行过程中，会自动调用这些生命周期函数，这些生命周期函数都是vue提前规定好的，我们在使用时只需要提供就行。但是需要注意的是，不同的周期函数实现的vue渲染效果差异很大，所以一定要搞清楚周期函数的使用规则，然后根据我们的需求和想要达到的效果，来选择提供的周期函数。

    比如created()函数，就是一个常用的生命周期，可以调用methods中的方法、改变data中的数据。那我们需要获取数据库数据，在系统前端进行显示，就可以使用这个函数。

created() {
      // watch 路由的参数，以便再次获取数据
      this.$watch(
        () => this.$route.params,
        () => {
          this.fetchData1()
        },
        // 组件创建完后获取数据，
        // 此时 data 已经被 observed 了
        { immediate: true,}
      )
},
methods: {
    fetchData1:function(){
      axios.get('http://127.0.0.1:8000/api/terminal/').then(res =>{
        console.log(res);
        console.log(res.data.data);
        this.data=res.data.data.terminal
        this.dat_w=this.data
        this.handleList()
        })
    },
}

用户权限

   涉及到用户管理时，可能需要根据不同的用户权限来进行不同操作，从而达到一定的安全性。

   首先，我们需要在创建用户时，设置好用户的权限，然后在路由设置函数中添加路由元信息，来定义相关页面的角色数组。

   可以看出，路由user只有用户权限为管理员才能进入， 其它用户禁止进入。

   然后在导航守卫中，根据获取的角色权限信息，判断用户的角色是否存在于数组中，存在即可访问。

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
  //to到哪儿 from从哪儿离开 next跳转 为空就是放行
  const role = localStorage.getItem('role');	//获取当前用户权限
  console.log(role)
  if (to.path === '/') {
  //如果跳转为登录，就放行
  next();
  } else {
  //取出localStorage判断
  let token = localStorage.getItem('token');
  if (token == null || token === '') {
    console.log('请先登录')
    next('/');
  } else {
      if(to.meta.role === '管理员'){
        if (role === '管理员') {
            next();		//若当前用户权限为admin则放行
        } else {
            next({path: '*'})	//若不是，则跳转到404页面s
               }
      }else{
        next();
     }
   }
}});
export default router;