6666666666666666

1.   技术

         vue3 + vite + ts

2.   安装vite项目

      （新版本）

      #   安装查看： https://cn.vitejs.dev/guide/features.html#glob-import

      #   新版本vite的项目创建（老版本问题有些不好解决，建议新版vite项目创建）

          在要创建的文件夹中 输入   cmd   进入，

          再    npm create vite@latest 

          之后输入给项目起的名称    xxx（自定义）

          之后回车下一步 ,选择  vue   一项

          再选择 vue-ts  一项

          安装一下node_modules包   npm install  （运行  npm i  会有报错）

          安装依赖    npm i --save-dev @types/node（解决require的报错）

（老版本）

      # 全局安装 vite

          npm install create-vite-app -g 

      # 创建项目，xxx 为项目名称 

          create-vite-app xxx

      # 进入目录 

           cd xxx 

      # 安装依赖 

          npm install 

      # 运行 

          npm run dev  

3.   插件

       #   设计器拖拽

          npm i -S vuedraggable@next

       #   vite配置  @vitejs/plugin-vue （新版vite项目可不安装）

          npm install @vitejs/plugin-vue --save-dev

       #   ts（新版vite项目选择 vue-ts 可不安装）

          npm install typescript --save-dev

          再运行

          npx tsc --init

       #   sass  sass-loader

          npm install sass sass-loader --save-dev

       #    vue-router-next

          npm install vue-router@4 --save

       #    axios

          npm install axios

       #   vuex

          npm install vuex@next --save

       #   element-plus

          npm install element-plus --save

       #   eslint

          npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-vue vue-eslint-parser

       #   pretter

          npm install --save-dev prettier

       #   实现全屏

          npm install screenfull

       #   裁剪图片cropperjs

          npm install cropperjs

       #   拖拽

          npm install sortablejs --save

       #   node环境配置

          npm install process

       #   mitt  （类似vue2中的eventBus）

          npm i mitt -S

       #   element-tree-line ( element-plus的el-tree-v2 添加虚线 )

               npm install element-tree-line -S

4.   文件配置

       #   根目录下创建  shim.d.ts  文件（解决 找不到模块 `./App.vue` 或其相应的类型声明  问题）

                    文件代码如下：

                            declare module "*.vue" {

                            import type { DefineComponent } from "vue"; 

                            const component: DefineComponent<{}, {}, any>; 

                            export default component; 

                            }  

         #   根目录下创建  vite.config.ts  文件（node_modules包版本导致 server 不可用）

         #   路由配置

                     在 src 文件夹下创建router文件夹，创建index.ts文件

                              import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

                              const staticRoutes: Array<RouteRecordRaw> = [ 

                                                            {  path: "/", 

                                                               name: "home", 

                                                               component: () => import("/@/views/layout/index.vue"), 

                                                               redirect: "/home", meta: { title: "首页", }, 

                                                               children: [ 

                                                                           { path: "/home",

                                                                             name: "home", 

                                                                             component: () => import("/@/views/home/index.vue"), 

                                                                             meta: { title: "首页", },

                                                                            },

                                                                           ],

                                                           },]; 

                                const router = createRouter({ 

                                                                 history: createWebHashHistory(), 

                                                                 routes: staticRoutes, 

                                                         });

                                export default router;

5.   vite中@的使用：

             例： import  xxx  from "@/views/xxx.vue"

              #   vite.config.ts中配置

                        alias: {

                              "@": path.resolve(__dirname, "./src"),

                        }

6.   正则表达式  

                手机号验证：  /^1[0-9]\d{9}$/