vite2.0+vue3.0+vuex+vue-router4+typescript+less 从0搭建项目

环境准备 node版本12.0.0以上

一：先使用vite搭建项目

1.命令行输入 npm init@vitejs/app

选择 vue 和 typescript

键入这三个命令 安装基础包

成功

 

二.接下来修改成自己习惯的项目架构

1.首先搭建vue-router 架构，

先安装vue-router依赖

less 依赖

在 src 目录下 新建views 文件夹 这里包含所有页面结构

views目录下 新建 Index目录， 这里是首页，新建三个文件index.less和index.vue和index.ts，使得每个页面的 html 、css、js 三种代码分离，不然页面复杂后会很头疼，这样直接切换就很方便

 

在src目录下新建router.ts文件，这里有个坑    一定要使用解构导出方法，按照官方文档的会报错

修改main.ts文件，引入vue-router到vue里面

修改App.vue文件 ，同时在src目录下新建App.less   ， 使得html 、css、js 三种代码分离

vue-router 引入成功 

 

2. 使用 vuex 做数据状态管理

安装vuex，使用最新版 这里是4.0

根据官网说明，vuex需要Promise，有些浏览器没有Promise，这里使用兼容库

npm install es6-promise --save

在src目录下新建 store.ts 文件

main.ts 引入 vuex

3.引入http网络请求模块，axios

4.引入socket.io模块

5.引入加密模块 里面包含 aes,base64,md5等常用加密模块

6.引入rsa非对称加密模块