Vue3学习笔记1

ulli{list-style:none;}ulli{list-style:none;}1.熟悉并搭建环境学习过程使用vite初始化Vue3项目配置Typescript使用vue-router使用vuex开发小案例一、使用vite初始化项目vite是一个基于Vue3单文件的非打包开发服务器components，是友达开发的新工具。用友达的话说：Vite是一个原生ESModule驱动的web开发构建工具。开发环境基于浏览器原生ES导入开发，生产环境基于Rollup打包。//ESModule和commonJS的基本区别//ESModuleimportimportxxxfrom'xxx';//commonJSimportconstxxx=require('xxxx');//ESModuleexportexportconstcounter={a:12}//commonJSexportmodule.exports={a:12}vite的优点启动项目可能需要几十秒甚至一分多钟。*开发服务器启动后，不需要进行打包操作，启动会变得非常快。*代码在需要的时候才编译，所以代码只有在真正显示在屏幕上时才编译。开始开发时，无需等待整个应用编译完成，这对于大型应用来说是一个巨大的改变*模块热替换性能与模块数量的关系解耦，模块热替换变得非常快。初始化vite项目执行yarncreatevite-appdemo01或npminitvite-appdemo01cd进入项目目录执行yarn安装依赖使用yarndev启动项目通过localhost:3000查看项目项目目录二、配置Typescript安装Typescript运行yarn添加typescript生成tsconfig.json配置文件执行tsc--init修改main.js文件为main.ts，将index.html中main.js的引用改为main.ts，并在其中添加lang="tsapp.vue和HelloWorld.vue的script标签"属性，例如：在根目录下创建一个declarations.d文件，写入如下内容://如果不这样做，在main.ts中引入app.vue会报错，因为ts不识别.vue文件declaremodule"*.vue"{import{Component}from"vue";常量组件：组件；exportdefaultcomponent;}3.使用vue-router安装vue-router，运行yarnaddvue-router@4.0.0-beta11（最新版本还是内测版，需要带上版本号）创建路由器src下的文件夹，然后添加index.ts文件，在index.ts文件中写入内容：import{createRouter,createWebHashHistory}from'vue-router';exportdefaultcreateRouter({//指定路由模式，这里是hash模式history:createWebHashHistory(),//路由地址routes:[//这里的配置和之前一样]})importvue-routerintom在ain.ts中，main.ts修改如下：import{createApp}from'vue'importAppfrom'./App.vue'import'./index.css'constapp=createApp(App);//importRoutingimportrouterfrom'./router/index';//挂载路由app.use(router);app.mount('#app');其余的路由配置如router-view,router-link与之前版本相同4.使用vuex安装vuex，运行yarnaddvuex@4.0.0-beta4（最新版本还是beta版，需要带上版本号）在src下创建一个store文件夹，然后添加index.ts文件，在index.ts文件中写入内容：import{createStore}from'vuex'exportdefaultcreateStore({state():{name:string,age:number}{return{name:'vue3',age:11}}})将Vuex引入main.ts，main.ts最终修改结果如下（包括router):import{createApp}from'vue'importAppfrom'./App.vue'import'./index.css'//importroutingimportrouterfrom'./router/index';//importstoreimportstorefrom'./商店/索引'；constapp=createApp(App);//挂载路由app.use(router);//挂载storeapp.use(store);app.mount('#app');5.开发小案例一个todolist的小demo，在src目录下新建一个view文件夹，然后在里面新建一个文件list.vue，并在文件中添加如下内容：ulli{list-style:none;}ulli{list-style:none;}修改App.vue内容：修改router/index.ts文件，调整路由导入{createRouter,createWebHashHistory}来自'vue-router'；从'../view/list.vue'导入列表；从'../components/HelloWorld.vue'导入HelloWorld；constroutes=[{path:'/'，名称：'索引'，组件：HelloWorld},{path:'/list',name:'list',component:List}]constrouter=createRouter({//指定路由方式，这里是hash方式history:createWebHashHistory(),//路由地址routes})导出默认路由器；最后可以打开http://localhost:3000/#/list查看效果，示例项目地址