Vuejs

nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具 创建项目 yarn create nuxt-app test 需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等 安装依赖 yarn 启动项目 yarn dev 构建打包 yarn build yarn start 启动测试环境 yarn test

组件的渲染，更新 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM vue应用的初始化 import { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的 ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）

Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3 Pinia作者也是vuex核心之一 安装pinia npm install pinia@next 或者 yarn add pinia@next 导入pinia并且挂载为vue插件(在Vite脚手架下) src/main.js import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state） import { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () => { return { count: 666 } }, //state: () => { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state....

vuex是一个专门为vuejs应用程序的设计的状态管理 集中式存储管理应用的所有组件的状态 多组件状态共享，不同的组件改变同一个状态 vuex知识点：state，getter，mutation，action 安装vuex npm install vuex –save 或者 yarn add vuex 导入vuex包 import Vuex from “vuex” 创建vuex实例 new Vuex.store() 将vuex实例挂载在vue对象上 index.js Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中） 使用解构获取状态： import { mapState } from ‘vuex’ export default { mounted() { console.log(this.count) }, computed: { …mapState([‘count’]) } } Getter getters: { getCount(state) { return state....

Vue CLI是vue官方脚手架，可以快速创建vue项目 安装vue-cli3 npm install -g @vue/cli 或者 yarn global add @vue/cli 升级 npm update -g @vue/cli 或者 yarn global upgrade –latest @vue/cli 创建vue项目 vue create vue-demo 如果提示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，可以使用npx vue create vue-demo default (babel, eslint) // 默认选项，包含babel和eslint Manually select features // 自定义创建配置工程 一般比较常用的有Babel，TypeScript，Router，CSS Pre-processors，Linter / Formatter 空格为选择，enter为下一步 跑vue项目 npm run serve 或者 yarn start/yarn run dev 如果运行报错error Component name “Home” should always be multi-word vue/multi-word-component-names 只需要在vue.config.js添加lintOnSave: false配置，例如： module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了...