客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
最近在学习vue3，在学习了基础知识之后，开始自己动手写一个基础的项目框架，以下为搭建的过程。 1. 安装 这次选择用vite，据说加载速度特别快，所以我也来试试。根据vite官方文档来新建项目：
因为这次要用到typescript，所以我选择的命令是： npm init @vitejs/app vue-template-ts --template vue-ts 等待创建好了之后，直接npm install， 然后npm run dev启动项目，此时一个基础的项目就启动了。查看文件可以看到，main.js变成了main.ts，其他的js文件也改为了ts格式，还多了两个文件：shims-vue.d.ts 和vite.config.ts
shims-vue.d.ts 的作用是帮助ts识别vue文件。vite.config.ts是vite提供的配置文件，替代了vue.config.js。 内容如下图：
基本的框架运行起来了，我们开始为真正的搭建项目做准备，首先安装axios、vuex 和vue-router,安装最新版就好了。 2. 基本配置 然后配置alias和相关代理
这里要注意，直接使用require会提示错误，是因为require是node环境里的，所以会提示我们安装： ‘@types/node’，然后我们需要在tsconfig.json里添加如下代码：
这样就可以使用require了。然后axios的代理也是在vite.config.ts里设置的，注意是在server下面，这个可以参看vite的配置文档，有说明。 optimizeDeps: {
exclude: ['vuex']
},
这个是识别vuex，如果不配置，在引入vuex的时候会报错。
*目录：
总的目录如下：
3. vuex的写法：
这里我们假设项目比较复杂，需要分为多个模块，所以在创建文件的时候，我们在store文件下分为了几个文件，目录如下：
首先是 interface.ts 这个文件定义了各个模块的类型，比如：
这里定义了两个模块的state类型，StateUser和LoadingStateTypes，然后通过RootStateTypes将所有的类型汇总并导出， 然后在index.ts中创建store
这里其实比较简单，有些我测试的时候引入的模块，但是后面我没有用，就可以不用管，这里和vue2.0的区别在于，以前是直接从vuex中引入store，然后通过vue.use(store)挂载，现在是从vuex中引入createStore，通过这个方法创建store，并在main.ts中引入这个文件，通过app.use(store)进行关联。
然后再看modules下面的各个模块的文件如何写，loading.ts比较简单，就不说了，app.ts里比较全面，就以这个为例：
首先引入了获取token相关的文件，然后是定义了一个接口StateUser，就是interface.ts里引入的state类型。
接着跟vue2.0差不多，定义state、mutations和actions，要注意在mutations里的state类型和actions里commit的类型，此处我从vuex里引入了Commit类型。通过context拿到了commit，最后将这个模块导出。 *注意：在使用store的时候有点儿区别，首先是在vue使用：
通过引入useStore获取store，然后其他就正常使用了。 如果是在ts文件中，则不能这样使用，通过useStore拿不到store，结果是undefined。所以在ts文件中，我们这样使用：
这里是路由拦截的代码，通过直接引入之前编写的store下面的index.ts文件，可以直接拿到store。 4. vue-router 先看看目录
接着说路由相关的代码，代码在index.ts。此处也不用通过vue.use(router)了，通过上图可以看到，我们通过从"vue-router"中引入“createRouter”和“createWebHashHistory”创建了router并设置history模式为hash。
然后是config.ts这里没有太多好分析的，主要是引入modules下面的路由模块。
单独的路由模块页面，和vue2没有啥区别：
5. axios请求 这里简单的封装了一下axios请求：
这里定义了请求头，并通过declare module ‘axios’扩展了AxiosRequestConfig， AxiosRequestConfig是axios请求头的类型，在ts中，如何直接给请求配置config里添加“actionKey”等参数是会报错的，原因是AxiosRequestConfig里没有定义这些字段，所以通过扩展，使AxiosRequestConfig有了这些字段。
这里只是简单的判断了一下，请求前token是否存在，以及是否需要判断loading，是否需要全局提示等。 6. 补充 最后补充一下hooks，这个是vue3的重头戏，这里我只简单的写了一个，就是loading的判断：
vue3.0允许我们在ts文件里使用computed、ref等响应式方法，在login里引入
以上就是简单的一个vue3.0项目模板。 |
请发表评论