Vue学习笔记记录

最新推荐文章于 2024-10-02 11:01:18 发布

shadow fish

最新推荐文章于 2024-10-02 11:01:18 发布

阅读量654

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45862085/article/details/113421160

版权

笔记专栏收录该内容

24 篇文章 2 订阅

订阅专栏

MVC 模式

M model 模型数据（js变量）
V view 视图用户所见界面（html css）
C control 控制器事件的交互后改变视图和数据关联（对DOM绑定事件）

MVVM模式

VM 即是替代C的，比如框架，可以直接实现数据交互

虚拟DOM

在js的内存中构建类似于DOM的对象，去拼装数据，拼装完整后，把数据整体解析，一次性插入html中，形成了虚拟DOM，相当于之前一条条向HTML中传数据，现在打包好一次性传入，效率提高。

创建项目

命令行vue ui

第一次是可能cli版本较低，需要先卸载之前的版本，使用npm uninstall vue-cli -g 或 yarn global remove vue-cli 命令行
之后再安装

npm install -g @vue/cli

安装成功后运行vue ui即可打开可视化界面进行创建（运行vue ui 最好在你所要创建的目录下运行）

之后界面日志显示这样一个报错
Failed to get response from https://registry.npm.taobao.org/vue-cli-version-marker
强制清除npm 缓存后报错消失

npm cache clean --force

配置elemen ui

插件添加插件搜索：vue-cli-plugin-element
找到后安装

安装axios依赖

依赖添加依赖搜索axios

码云代码托管

设置SSH公钥

具体流程见链接

设置路由

按需导入element

在element.js 里导入

import {} from 'element-ui'

{}里代表要导入的组件
比如：

import {Form,FormItem} from 'element-ui'
import {Input} from 'element-ui'

然后注册全局可用

Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

导入外部图标

在阿里矢量库选择图标下载代码至本地
将fonts文件导入到项目文件夹assets中
在main.js中全局引入

import './assets/fonts/iconfont.css'

在需要的地方写入基础类名和对应的图标名

 <el-input  prefix-icon="iconfont icon-electronics
"  placeholder="请输入密码"></el-input>

导入axios包

在main.js全局导入，挂载到vue的原型对象上

import axios from 'axios'
Vue.prototype.$http=axios

这样每一个vue的组件都可以通过this访问到$http，从而发起axios请求
再为axios设置请求的根路径

axios.defaults.baseURL="http://？？？/api/private/v1/"

使用示例：

 this.$http.post("login",this.loginForm).then(res=>{
           console.log(res)
         });

第一次显示报错post未定义，后来发现是没有保存main.js文件哈哈哈

编程式跳转页面

利用路由

 this.$router.push('/home')

需要在路由里注册

import Home from '../components/Home.vue'
在routes数组中加入该对象
 {
    path:'/home',
    component:Home
  }

个人想法，微信小程序的wx.navigator也是类似的功能，会跳转到指定页面文件的xml，而这个是跳转到指定的组件

路由导航守卫控制页面访问权限

代码示例：

router.beforeEach((to, from, next)=>{
  //to表示将要访问的路径
  //from 表示从哪个路径跳转过来
  //next是一个函数，表示放行，两种表示方式 next() 直接放行   next('/login') 强制跳转
  if(to.path === '/login') return next()
  const tokenstr = window.sessionStorage.getItem('token')
  if(!tokenstr) return next('/login')
  next()
})

axios拦截器

axios.interceptors.request.use(config=>{
  console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config//必填
})

子路由

使用children数组，并将/home重定向，并在Home组件中放一个路由占位符：

 {
    path:'/home',
    component:Home,
    redirect:'/welcome',
    children:[
      {
        path:'/welcome',
        component:Welcome
      }
    ]
  }

 <el-main>
         <router-view></router-view>
  </el-main>

公共组件封装

以面包屑导航为例：

新建BreadNav.Vue 文件
这里提示必须有v-bind:key

<template>
  <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="item in navList" :key="item.name">{{item.name}}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
    export default{
      name:'BreadNav',
      props:{
        navList:{   //接收到来自父组件的传值
          type:Array,
          required:true
        }
      }
    }
</script>

新建一个js文件（类似于element.js,但也有许多不一样，暂时还不明白）

import BreadNav from './BreadNav.vue';
BreadNav.install=function(Vue){
  Vue.component(BreadNav.name,BreadNav)
}
export default BreadNav

在main.js中全局引用

import BreadNav from '@/components/common/BreadNav.js'
Vue.use(BreadNav)

4.使用

<template>
  <div>
      <bread-nav :navList="breadNavList"></bread-nav>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        breadNavList:[
          {
            name:'权限管理'
          },

          {
            name:'权限列表'
          }
        ]
      }
    }

  }
</script>

过滤器

全局定义：

Vue.filter("dateFormat", function(originVal) {
  const dt = new Date(originVal);
});

使用：

{{variable | dateFormat}}

个人感觉类似于计算属性的作用，需要对数据进行处理才能得到正确的展示数据

安装echarts插件

1.在vue UI 可视化里安装echarts 依赖
2. 导入到所需的组件中

import * as echarts from "echarts";

import * as xxx from ‘xxx’: 会将若干export导出的内容组合成一个对象返回；

import xxx from ‘xxx’：只会导出这个默认的对象作为一个对象
第一次采用第二种方式导入，报错了
3. 准备一个DOM

 <div id="main" style="width: 600px;height:400px;"></div>

在DOM 渲染完成后（即使用mounted函数）调用

mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
      title: {
        text: "ECharts 入门示例"
      },
      tooltip: {},
      legend: {
        data: ["销量"]
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    };
    myChart.setOption(option);
  },

nprogress 进度条插件

只需在全局引入，在需要的位置调用函数显示和隐藏进度条

babel-plugin-transform-remove-console 开发依赖

安装之后在babel.config.js中加一行

 "transform-remove-console"

但是这样的在开发阶段和发布阶段的console.log都会被去掉，可以先做一个判断再决定是否加入

const prodPlugins = [];
//如果是产品发布阶段才会去掉console.log
if (process.env.NODE_ENV === "production") {
  prodPlugins.push("transform-remove-console");
}

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ],
    ...prodPlugins
  ]
};

通过chainWebpack 配置开发环境与生产环境两个不同的入口

在根目录下新建一个文件 vue.config.js

module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === "production", config => {
      config
        .entry("app")
        .clear()
        .add("./src/main-prod.js");
    });

    config.when(process.env.NODE_ENV === "development", config => {
      config
        .entry("app")
        .clear()
        .add("./src/main-dev.js");
    });
  }
};

通过externals 加载外部CDN资源

引入外部依赖项，在进行打包的时候，会将所有导入的依赖项都打包到一个文件中，会使文件包特别大，通过externals 配置，在进行打包时，如果在externals 里包含该依赖，便不会将其打包，而是会到window全局环境中去查找该依赖，从而减小包的大小

只在发布模式里引入

 config.set("externals", {
        vue: "Vue",
        "vue-router": "VueRouter",
        axios: "axios",
        lodash: "_",
        echarts: "echarts",
        nProgress: "Nprogress"
      });

之后还要在index.html文件头部添加对应的CDN资源引用,包括js与css样式
如：

<script src="https://cdn......></script>

我的理解就是这样通过外部引用调用就不需要引入到自己的文件中，从而减少自己文件的大小，减轻服务器压力

对element ui 外部引用CDN资源

在main-prod.js中删除掉对element ui 的import
在index.html 文件中引入对应的cdn 资源（包括js和css）
不是很理解为什么element ui 的改进和其他依赖不同