前端项目笔记（一）——关于Vue的问题

项目场景：

用Vue写一个前端项目

---

问题描述及解决方案：

Vue项目篇

Bugs：

1. 依赖项出问题：删除node_modules文件夹后重装npm install
2. echarts的init报错：将import echarts from 'echarts’改为import * as echarts from ‘echarts’
3. echarts-gl导入使用问题：npm install [email protected]，并在main.js中import ‘echarts-gl’
4. 报错‘Qs’未引入：把 import qs from ‘Qs’; 改成 import qs from ‘qs’; 即可。
   注意！：在HTML中是不分大小写的，但在JS中对大小写是敏感的！
   

---

Questions:

1. 可否商用前端模板
   
   
   

2. 修改前端模板：

   引进页面步骤：
   ①在router/index.js中修改路由
   ②在Sidebar组件中添加相应页面
   
   引入三维图像：
   ①npm install [email protected]
   ②在main.js中import ‘echarts-gl’
   
   单页面的标签缓存：
   vue-router中使用keep-alive属性绑定需要缓存的组件界面
   
   

3. vue和react的区别
   
   ①数据是不是可变的：
     react的性能优化需要手动去做，而vue的性能优化是自动的。
     但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控。
   ②通过js还是用各自的处理方式来操作：
     react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等，
     vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。
   ③类式的组件写法，还是声明式的写法：
     react是类式的写法，api很少，而vue是声明式的写法，通过传入各种options，api和参数都很多。所以react结合typescript更容易一起写，vue稍微复杂。
   ④总结：
     react整体的思路就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，而vue是基于可变数据的，支持双向绑定。react组件的扩展一般是通过高阶组件，而vue组件会使用mixin。vue内置了很多功能，而react做的很少，很多都是由社区来完成的，vue追求的是开发的简单，而react更在乎方式是否正确。

4. 如何把 React 项目重构为 Vue 项目

5. 从 Vue 的视角学 React:
   （一）—— 项目搭建
   （二）—— 基本语法
   （三）—— 事件处理
   （四）—— 组件传参

---

Methods:

1. vue组件模板

<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>XX管理</el-breadcrumb-item>
      <el-breadcrumb-item>XX列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card> </el-card>
  </div>
</template>

<script>
export default {
     
     
  data() {
     
     
    return {
     
     }
  },
  created() {
     
     },
  methods: {
     
     }
}
</script>

<style scoped></style>

2. a标签空连接
   在进行切页面或者说页面设计时，
   a标签会经常使用到，href属性值通常需要给一个空连接
   1、<a href="###">
   2、<a href=“javascript:void(0)”>
   3、<a href=“javascript:;”>
   注意：不要使用<a href="#">，#是用来跳转到锚点的，这样写默认表示<a href="#top">
   锚点定义：<a name=“top”>

原因分析：

对 Vue 和 echarts 使用不熟，多加练习，可以考虑把Vue相关课程重新简要地学习一遍。