当前位置： 代码迷 >> 综合 >> vue学习笔记：生命周期，搭建Vue3.0项目
  详细解决方案

vue学习笔记：生命周期，搭建Vue3.0项目

热度：104   发布时间：2023-11-26 00:25:10.0

目录

生命周期

创建Vue 3.0

[@vue/compiler-sfc]

vue 3 ref和reactive定义的数据如何修改

vue3中监听值的变化

Vue3出现一堆提示报错：vue3导入模块时报错---'HelloWorld' is declared but its value is never read.Vetur

更新（20220425）：新的解决方案

  • 生命周期

生命周期部分参考了该作者的博客：Vue - 生命周期详解 - 简书

1、beforeCreate( 创建前 )
在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。
2、created ( 创建后 ）
实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成
3、beforeMount
挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
4、mounted
挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
5、beforeUpdate
在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程
6、updated（更新后）
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用
7、beforeDestroy（销毁前）
在实例销毁之前调用，实例仍然完全可用，

这一步还可以用this来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器  和 监听的dom事件

8、destroyed（销毁后）
在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

作者：前端_周瑾
链接：https://www.jianshu.com/p/672e967e201c/

  • 创建Vue 3.0

 按照官方文档操作：快速上手 | Vue.js

1、我这边考虑到其他同事不习惯jsx语法，所以选择No

Vue绑定class在jsx和js的区别

1.1对象绑定后面的是判断条件,取的是定义的字符串<div :class="{active:isactive,hello:isactive}"></div>计算属性//取得是定义的字符串<div :class="cactive"></div>
1.2数组绑定取得是data里面的数据<div :class="[isactive? activeClass:'',errorClass]"></div>取得是定义的字符串<div :class="[{active:isactive},'aaaa']">
2.jsx中
<div class={[this.active?'persss':'','item']}></div>
<div class={[{'purchse':this.active},'item']}</div>

2、pinia，选择Yes

Pinia API 与 Vuex ≤4 有很大不同，即：

（1）突变不再存在。他们经常被认为是非常冗长的。他们最初带来了 devtools 集成，但这不再是问题。
（2）无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
（3）不再需要注入魔法字符串、导入函数、调用它们，享受自动完成功能！
无需动态添加商店，默认情况下它们都是动态的，您甚至都不会注意到。请注意，您仍然可以随时手动使用商店进行注册，但因为它是自动的，您无需担心。
（4）不再有模块的嵌套结构。您仍然可以通过在另一个商店中导入和使用商店来隐式嵌套商店，但 Pinia 通过设计提供平面结构，同时仍然支持商店之间的交叉组合方式。你甚至可以有 store 的循环依赖。
（5）没有命名空间的模块。鉴于商店的扁平架构，“命名空间”商店是其定义方式所固有的，您可以说所有商店都是命名空间的。

3、Vitest项目内暂时不需要测试

4、Cypress项目内暂时不需要自动化测试

5、创建项目的完整截图

 6、启动

npm install
npm run dev

 7、引入Element Ui

Element - The world's most popular Vue UI framework

npm i element-ui -S

报错：

官网说明 :https://element-plus.gitee.io/#/zh-CN/component/installation
这次得安装 element-plus

npm install element-plus --save

main.js / main.ts文件内引入element-plus

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

报错

 其实只是文件位置变了 需要自己在文件目录看一下
这个css不在lib里 theme-chalk文件夹被挪出来了
改成新位置：import 'element-plus/dist/index.css';

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';import App from './App.vue';
import router from './router';import './assets/main.css'const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(ElementPlus)app.mount('#app')

8、main.ts中ts提示：Cannot find module './App.vue' or its corresponding type declarations.

a、在src目录下创建vue.d.ts文件（啥名字都行我直接叫vue了）

b、在vue.d.ts文件进行以下声明

declare module "*.vue" {import Vue from "@/vue";export default Vue;
}

c、找到tsconfig.app.json文件加入include："include": ["src/vue.d.ts*", "vite.config.*", "vitest.config.*", "cypress.config.*"],

9、main.ts中ts提示：Argument of type 'typeof import("D:/job/vue-project/node_modules/vue/dist/vue")' is not assignable to parameter of type 'Component<any, any, any, ComputedOptions, MethodOptions>'.   Type 'typeof import("D:/job/vue-project/node_modules/vue/dist/vue")' ..........

 修改上面提到的vue.d.ts文件，代码替换成如下：

declare module "*.vue" {import { defineComponent } from "vue";const component: ReturnType<typeof defineComponent>;export default component;
}

10、修改webpack

官方文档：配置参考 | Vue CLI

升级到3.0以后的vue cli工具，对webpack做了深度的集成，老版本的config文件不存在了。但是如果仍然需要对项目配置做修改的话，可以按照以下方式进行：
在项目的根目录下创建vue.config.js/vue.config.ts文件，vue.config.js /vue.config.ts是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载，一份配置demo如下：

const path = require('path')const resolve = dir => {return path.join(__dirname, dir)
}const BASE_URL = process.env.NODE_ENV === 'production'? '/shuo_xue': '/'
module.exports = {// 项目部署的基础路径// 我们默认假设你的应用将会部署在域名的根部，// 比如 https://www.my-app.com/// 如果你的应用时部署在一个子路径下，那么你需要在这里// 指定子路径。比如，如果你的应用部署在// https://www.foobar.com/my-app/// 那么将这个值改为 `/my-app/`publicPath: BASE_URL,　　/*这个是我存放在github在线预览的Reader项目*/// 将构建好的文件输出到哪里（或者说将编译的文件）outputDir: 'dist',// 放置静态资源的地方 (js/css/img/font/...)assetsDir: '',// 用于多页配置，默认是 undefinedpages: {index: {// 入口文件entry: 'src/main.js',　　/*这个是根入口文件*/// 模板文件template: 'public/index.html',// 输出文件filename: 'index.html',// 页面titletitle: 'Index Page'},// 简写格式// 模板文件默认是 `public/subpage.html`// 如果不存在，就是 `public/index.html`.// 输出文件默认是 `subpage.html`.subpage: 'src/main.js'　　　　/*注意这个是*/},// 是否在保存的时候使用 `eslint-loader` 进行检查。// 有效的值：`ture` | `false` | `"error"`// 当设置为 `"error"` 时，检查出的错误会触发编译失败。lintOnSave: true,// 是否为生产环境构建生成 source map？productionSourceMap: true,chainWebpack: config => {config.resolve.alias.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components')).set('_c', resolve('src/components')).set('_conf', resolve('config')).set('_p', resolve('public'))},// 打包时不生成.map文件productionSourceMap: false,// 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串// devServer: {//   proxy: 'localhost:3000'// }//less版本过高需要添加css: {loaderOptions: {less: {javascriptEnabled: true,}}},// 配置 webpack-dev-server 行为。devServer: {host: '0.0.0.0',port: 8080,// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理proxy: {'/api': {target: 'http://localhost:8880',changeOrigin: true,secure: false,// ws: true,pathRewrite: {'^/api': '/static/mock'   // 请求数据路径别名,这里是注意将static/mock放入public文件夹}}},before: app => {}},// 三方插件的选项pluginOptions: {// ...}
}

11、引入less

npm install less-loader@latest --save

报错：

 改为如下：

//尝试使用proxy来代理访问：
npm config set registry https://registry.npm.taobao.org 
npm install less-loader@latest --save

在.vue文件的 style 标签中添加 lang="less"后，即可采用less的语法编写CSS代码
附：引入变量(varibles)和混合(mixins)的写法如下：
在 src/assets/目录下新建 styles 目录，并在此目录下编写 varibles.less 和 mixins.less
编写CSS代码时通过 import 引入：

<style lang="less" scoped>
@import "./App.less";
/* 样式代码 */
</style>

  • [@vue/compiler-sfc] <script> and <script setup> must have the same language type.

 解决办法：当项目是ts的时候，普通的script上也需要声明lang=‘ts’，否则会报错

<script lang="ts"></script>

  • vue 3 ref和reactive定义的数据如何修改

const a = ref('add');
const b = reactive({data:{}})const getData=()=>{
//修改a的字符串   
a.value = 'edit'；
//修改b的对象值
b.data = {name:'小明',age:12}
}

  • vue3中监听值的变化

// 监听单个数据的变化
const state = reactive({a: 1,b:2})
watch(()=> state.a,(newValue, oldValue)=> {// ... 微队列调用},options // 配置参数对象 如immediate
)
const count = ref(0)
watch(count,(newValue, oldValue)=> {// ...},options // 配置参数对象 如immediate
)
// 监听多个数据的变化
watch([()=> state.a, count],([newValue1, newValue2], [oldValue1, oldValue2])=> {// ...},options
)

  • Vue3出现一堆提示报错：vue3导入模块时报错---'HelloWorld' is declared but its value is never read.Vetur

vue3已经不支持vetur!!

解决办法

1.打开vscode编辑器的设置

2.搜索vetur

3.取消选中

关闭项目之后再重新打开就可以得到一个干净没有红色波浪的项目啦

更新（20220425）：新的解决方案

1.下载vscode插件Vue Language Features 和TypeScript Vue Plugin (Volar)

2.在设置里面搜索并在本工作区禁用vetur

原文链接：问题：vue3导入模块时报错---'HelloWorld' is declared but its value is never read.Vetur(6133) - ling'er - 博客园

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.