vue3学习笔记1

1.熟悉和搭建环境

学习过程

1. 使用vite初始化Vue3项目
2. 配置Typescript
3. 使用vue-router
4. 使用vuex
5. 开发小案例

1.使用vite初始化项目

vite 是一个基于 Vue3 单文件组件的非打包开发服务器，是尤大新开发的一个工具，用尤大的话说：Vite 是一个由原生 ES Module 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于Rollup打包。

//ES Module和commonJS基本使用区别

//ES Module 导入
import xxx from 'xxx';
//commonJS 导入
const xxx = require('xxxx');

//ES Module 导出
export const counter = {
    a: 12
}
//commonJS 导出
module.exports = {
    a: 12    
}

vite的优势

webpack启动项目可能要几十秒甚至超过一分钟

* 开发服务器启动后不需要进行打包操作，启动会变得非常迅速
* 代码在需要的时候进行编译，所以只有代码真正在屏幕上展现的时候才进行编译。开始开发的时候再也不需要等待整个应用编译完成，这对大型应用是一个巨大的改变
* 热模块替换的性能和模块的数量之间的关系解耦，热模块替换变得非常快

初始化vite项目

1. 执行yarn create vite-app demo01或者npm init vite-app demo01
2. cd进入到项目目录执行yarn安装依赖
3. 使用yarn dev启动项目
4. 通过localhost:3000查看项目

   

项目目录

2.配置Typescript

1. 安装Typescript运行yarn add typescript
2. 生成tsconfig.json配置文件 执行tsc --init

3. 修改main.js文件为main.ts，将index.html中main.js的引用也修改为main.ts，将app.vue和HelloWorld.vue的script标签加上lang="ts"属性，例如：

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

4. 在根目录下创建declarations.d文件，并写入如下内容：

   //不这么处理的话，在main.ts中引入app.vue会报错，因为ts不识别.vue文件
   declare module"*.vue" {
     import { Component } from"vue";
     const component: Component;
     export default component;
   }

3.使用vue-router

1. 安装vue-router，运行yarn add vue-router@4.0.0-beta11 （最新版本还是beta版本，需要带上版本号）

2. 在src下创建router文件夹，然后添加index.ts文件，在index.ts文件中写入一下内容：

   import { createRouter, createWebHashHistory } from 'vue-router';
   
   export default createRouter({
     //指定路由的模式，此处使用的是hash模式
     history: createWebHashHistory(),
     // 路由地址
     routes: [
      // 这里的配置和之前一样   
     ]
   })
   

3. 将vue-router引入到main.ts里面，main.ts修改后内容如下：

   import { createApp } from 'vue'
   import App from './App.vue'
   import './index.css'
   
   const app = createApp(App);
   // 引入路由
   import router from './router/index';
   // 挂载路由
   app.use(router);
   
   app.mount('#app');

   剩余的路由配置例如router-view、router-link都与之前版本相同

4.使用vuex

1. 安装vuex，运行yarn add vuex@4.0.0-beta4（最新版本还是beta版本，需要带上版本号）

2. 在src下创建store文件夹，然后添加index.ts文件，在index.ts文件中写入一下内容：

   import { createStore } from 'vuex'
   
   export default createStore({
     state(): { name: string, age: number } {
       return {
         name: 'vue3',
         age: 11
       }
      }
    })

3. 将vuex引入到main.ts里面，main.ts最终修改结果如下（包括router）：

   import { createApp } from 'vue'
   import App from './App.vue'
   import './index.css'
   
   // 引入路由
   import router from './router/index';
   // 引入store
   import store from './store/index';
   
   const app = createApp(App);
   
   // 挂载路由
   app.use(router);
   // 挂载store
   app.use(store);
   
   app.mount('#app');

5.开发小案例

​ 一个todolist的小demo

1. 在src目录下面新建一个view文件夹，然后在其中新建文件list.vue，并为文件添加以下内容：

   <template>
     <div>
       <div>
         <label for="add">新增事项：</label>
         <input
           placeholder="回车确定新增"
           type="text"
           id="add"
           v-model="state.message"
           @keyup.enter="doAdd"
         />
       </div>
       <div>
         <h2>待办事项：{{ todoList.length }}</h2>
         <ul>
           <li
             v-for="item in todoList"
             :key="item.id"
             @click="changeItem(item, true)"
           >
             <input type="checkbox" />
             <label for="">{{ item.message }}</label>
           </li>
         </ul>
       </div>
       <div>
         <h2>已完成事项：{{ doneList.length }}</h2>
         <ul>
           <li
             v-for="item in doneList"
             :key="item.id"
             @click="changeItem(item, false)"
           >
             <input type="checkbox" checked />
             <label for="">{{ item.message }}</label>
           </li>
         </ul>
       </div>
     </div>
   </template>
   <script lang="ts">
   // reactive就是vue2.x的data
   // 在 Vue 2x 中数据的响应式处理是基于 Object.defineProperty() 的，
   // 它只会侦听对象的属性，并不能侦听对象，所以我们在给对象加属性的时候通常要用$set
   // 例如：Vue.$set(object, 'key', value)
   // reactive 是基于 ES2015 Proxy 实现对数据对象的响应式处理,可以往对象中添加属性
   // 例如： object.key = value
   
   type LooseObject = { key: string]: any; };
   
   import { computed, reactive } from "vue";
   import { useRouter } from 'vue-router';
   export default {
     // setup相当于vue2.0的 beforeCreate和 created
     // 是vue3新增的一个属性，所有的操作都在此属性中完成
     setup(props) {
       const state = reactive({
         list: [
           { id: 1, isDone: false, message: "看书" },
           { id: 2, isDone: true, message: "睡觉" },
           { id: 3, isDone: false, message: "恰饭" },
         ],
         message: "",
       });
   
       // 未完成列表
       const todoList = computed(() => {
         return state.list.filter((item) => !item.isDone);
       });
   
       // 已完成列表
       const doneList = computed(() => {
         return state.list.filter((item) => item.isDone);
       });
   
       const changeItem = (item: LooseObject, state: boolean) => {
         item.isDone = state;
       };
   
       // 新增事项   
       const doAdd = () => {
         if (state.message == "") return;
   
         state.list.push({
           id: state.list.length + 1,
           isDone: false,
           message: state.message,
         });
   
         state.message = "";
       };
         
       // 在Vue3.x中，所有的数据和方法都通过在setup中return出去
       // 然后在template中使用
       return {
         state,
         todoList,
         doneList,
         changeItem,
         doAdd
       };
     },
   };
   </script>
   <style scoped>
   ul li {
     list-style: none;
   }
   </style>

2. 修改App.vue内容：

   <template>
     <router-view></router-view>
   </template>
   
   <script lang="ts">
   export default {
     name: 'App'
   }
   </script>

3. 修改router/index.ts文件，调整路由

   import { createRouter, createWebHashHistory } from 'vue-router';
   import List from '../view/list.vue';
   import HelloWorld from '../components/HelloWorld.vue';
   
   const routes = [
     {
       path:'/',
       name:'index',
       component: HelloWorld
     },
     {
       path:'/list',
       name:'list',
       component: List
     }
   ]
   
   const router =  createRouter({
   
     //指定路由的模式，此处使用的是hash模式
     history: createWebHashHistory(),
   
     // 路由地址
     routes
   })
   
   export default router;

最后就可以打开 http://localhost:3000/#/list查看效果了，示例项目地址