VUE学习（一）

       工作原因不得已又要学习前端技术了，以前简单学习过VUE，项目中也进行开发过，但是现在忘得一干二净，而且之前也是稀里糊涂的，现在好多代码也看不懂了，这可不行，从基础恶补式学习吧，本博客主要方便自己查看，不用再到处看资料。本次学习VUE3.

一、关于VUE3

 Vue 3 不兼容 IE11 以下的浏览器，因为Proxy 存在一些兼容性问题。

 Vue 3 选择了 TypeScript，TypeScript 官方也对使用 TypeScript 开发 Vue 3 项目的团队也更加友好。Vue 2 选 Flow.js 没问题，但是现在 Flow.js 被抛弃了

如果你的应用被要求兼容 IE11，就应该选择 Vue 2。而且，Vue 团队也已经放弃 Vue 3 对 IE11 浏览器的支持。

二、VUE基础

v-model 指令

在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-once指令

能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

 v-if指令

• v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
• 也就是根本没有不会有对应的标签出现在DOM中

三、基于 Vite 2 和 Vue 3搭建Vue 3工程化项目

 1.安装nodejs

2.安装 VS Code 的官方扩展插件 Volar

3.创建初始化Vite项目

npm init @vitejs/app

 在 Project name 这一行，我们输入项目的名字，例如 geek-admin；接着，在 Select a framework 这一行输入框架的名字，这里我们选择 vue；再之后，在 select a variant 这一行，因为在项目里，我们没有选择 TS，所以这里我们依然选择 vue 即可。

在项目文件夹内执行 npm install 命令

 4.开发的项目是多页面的，所以 vue-router 和 Vuex 也成为了必选项。Vue 负责核心，Vuex 负责管理数据，vue-router 负责管理路由。我们在 项目目录中使用下面这段代码安装 Vuex 和 vue-router。

npm install vue-router@next vuex@next

 使用@next是安装Vue3的版本

5.项目结构规范：

├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
│   ├── router         路由配置
│   ├── store          vuex数据
│   └── utils          工具函数

vue文件通过 template、script 和 style 来维护 Vue 组件的 HTML、JavaScript 和 CSS

6.创建路由文件。router 文件夹中，新建 index.js。

import {
    createRouter,
    createWebHashHistory,
  } from 'vue-router'
// 要先创建home.vue，about.vue，否则因为找不到文件，会报错
  import Home from '../pages/home.vue'
  import About from '../pages/about.vue'
  
  const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
  
  const router = createRouter({
    history: createWebHashHistory(),
    routes
  })
  
  export default router
  

 7.在 main.js 中，加载 router 的配置

import { createApp } from 'vue'
import App from './App.vue'

import router from './router/index'
createApp(App)
    .use(router)
    .mount('#app')

 8.App.vue文件，书写代码

<template>
  <div>
    <router-link to="/">首页</router-link> | 
    <router-link to="/about">关于</router-link>
  </div>
  <router-view></router-view>
</template>

router-link 和 router-view 就是由 vue-router 注册的全局组件，router-link 负责跳转不同的页面，相当于 Vue 世界中的超链接 a 标签； router-view 负责渲染路由匹配的组件，通过把 router-view 放在不同的地方，实现复杂项目的页面布局。 

项目运行  执行 npm run dev

四、开发实践

1.VSC快捷键格式化代码： windows：Shift+Alt+F Mac：Shift+Option+F Ubuntu：Ctrl+Shift+I 

2.在实际项目开发中还会有各种工具的集成，比如写 CSS 代码时，我们需要预处理工具 stylus 或者 sass；组件库开发中，我们需要 Element3 作为组件库；网络请求后端数据的时候，我们需要 Axios。

对于团队维护的项目，工具集成完毕后，还要有严格的代码规范。我们需要 Eslint 和 Prettier 来规范代码的格式，Eslint 和 Prettier 可以规范项目中 JavaScript 代码的可读性和一致性。

代码的管理还需要使用 Git，我们默认使用 GitHub 来托管我们的代码。此外，我们还会使用 commitizen 来规范 Git 的日志信息。

对于我们项目的基础组件，我们还会提供单元测试来确保代码质量和可维护性，最后我们还会配置 GitHub Action 来实现自动化的部署。

3.常用工具 vuex 的数据本地持久化插件；接口数据的mock， json-server；埋点的sdk；@vueuse 库，封装常用的hooks；taiwind，mitt，ITCSS，WindiCSS，比起taiwind更推荐Tailwind；工具库lodash。