【vue3后台项目】项目初始化

vue3新特性介绍

Composition API

vue2中的option API：

当你的组件变得越来越复杂时，组件的可读性会变得越来越差；

有了Composition API了之后，定义数据和使用数据放在一起处理，以达到更易读、更方便扩展的目的；

实现响应式

vue2中有这样一段话：

由于JS的限制，Vue不能检测数组和对象的变化；

这里说的限制，其实是Object.definProperty()的限制；

因为Object.definProperty()是通过：为对象属性指定描述符 的方式来监听对象中某个属性的get和set ；所以在以下两种情况下，新的属性是非响应式的：

1.对于对象：

js 复制代码

var vm = new Vue({
  data: {
    a: 1,
  },
});
// vm.a是响应式的

vm.b = 2;
// vm.b是非响应式的

2.对于数组：

js 复制代码

var vm = new Vue({
  data: {
    items: ["a", "b", "c"],
  },
});
vm.items[1] = "x"; // 不是响应性的
vm.items.length = 2; // 不是响应式的

Vue3通过Proxy实现响应式；

Proxy用于：为对象创建一个代理，从而实现基本操作的拦截。

全新的全家桶

不仅是只有一个vue.js这个核心库，还有其他比如vue-router,vuex等；当vue3发布之后，vue-router、vuex等全家桶都迎来了一波更新；

全新的TS支持

vue3使用TypeScript进行了重构，其目的是为了防止随着应用的增长，而产生的许多潜在的运行时静态类型错误；TS的优势主要在于静态类型检查和环境声明，但同时它也会为项目增加复杂度；

vite

vite和webpack类似，也是一个前端打包工具；vite基于原生ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）；

@vue/cli项目初始化

js 复制代码

// 安装 @vue/cli
npm i -g @vue/cli

vue create mj-admin
// 进入模板选择

单独的配置文件；

eslint

eslintrc.js 复制代码

ESLInt配置文件遵循commonJS的导出规则，所导出的对象就是ESLint的配置对象
module.exports = {
  // 表示当前目录即为根目录，ESLint的规则将被限制到该目录下
  root: true,
  // env表示启用ESLint的检测环境
  env: {
    // 在node环境下启动ESLint检测
    node: true
  },
  // ESLint 中基础配置需要继承的位置
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  // 解析器
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  // 需要修改的启用规则及其各自的错误级别
  /**
  *错误分为3种：
  *off 或 0 -关闭规则
  *warn 或 1 -开启规则，使用警告级别的错误：warn（不会导致程序退出）
  *error 或 3 -开启规则，使用错误级别的错误：erro（当被触发时，程序会推出）
  */
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Prettier

Prettier:
代码格式化工具
开箱即用
直接集成到VSCode
保存时，让代码直接符合ESLint

Prettier配置

1.在VSCode中安装Prettier插件，这个插件能帮我们在配置Prettier时获得提示；

2.在项目中新建.prettier文件，该文件为prettier默认配置文件；

.prettier 复制代码

{
  // 不尾随分号
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 多行逗号分隔的语法中，最后一行不加逗号
  "trailingComma": "none"
}

3.VSCode中设置找到save;

4.空格数

VSCode：默认一个tab等于4个空格； ESLint：希望一个tab等于2个空格；

Prettier和ESLint的冲突问题

在.eslintrc.js中配置rules的off；

vue3项目结构解析

这里是和vue2的项目结构做比较：

1.main.js

通过按需导入的createApp方法来构建vue实例；
通过vue实例.use方法来挂载插件（router、vuex）
没有了Vue的构造方法，无法再挂载原型；

2.App.vue 组件内部结构无变化，依然是：

template
script
style 在template标签中支持多个根标签；

3.store/index.js 通过按需导入的createStore方法来构建store实例；无需再通过Vue.use(Vuex)的形式进行挂载；

4.router/index.js

通过按需导入的createRouter方法来构建router实例；
通过按需导入的createWebHashHistory方法来创建hash模式对象，进行路由模式指定；
无需再通过Vue.use(VueRouter)的形式进行挂载；
routers路由表的定义无差别；

综上所述，Vue3和Vue2对比最大差异就是两点：

vue3使用按需导入的形式进行初始化操作；
template标签中支持多个根标签；

删除无用代码

1.删除views文件夹下所有的.vue；

2.删除componens文件夹下所有的.vue；

3.App.vue初始化：

App.vue 复制代码

<template>
  <router-view />
</template>

<style lang="scss"></style>

4.router/index.js初始化：

router/index.js 复制代码

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = []

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

导入elment-plus

1.在通过vue-cli创建的项目中，执行：

js 复制代码

vue add element-plus

再初始化一下App.vue文件：

App.vue 复制代码

<template>
  <router-view />
</template>

<script>
export default {
  name: 'App'
}
</script>

<style></style>