vue3.0梳理之项目搭建(vite)

说了一些3.0的东西,但是项目的搭建给忽略了

1.项目的初始化搭建

• 初始化 vue3.0 项目

yarn create @vitejs/app vue-3.0-test

• 选择vue创建(梳理完再说+ts)
  我用新电脑从头开始创建的项目,选择自己常用的yarn,出现了一个错误问题,顺便说一嘴
  yarn : 无法加载文件 C:\Users\zhang\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1
  这个问题实际上是脚本执行的权限问题,可以通过管理员方式打开脚本工具,执行如下操作

set-ExecutionPolicy RemoteSigned
//选择y同意
get-ExecutionPolicy

• 执行过这两个脚本修改权限之后就可以进行yarn的使用

可以看到初始化项目之后项目的目录结构十分的简洁,我们执行yarn(或者npm install)来安装依赖
运行即可

2.ts配置

ts的配置其实没什么可讲的,但是实际上在工作之中,不一定我们开发的项目一开始创建就随我们的心意,我就接手了一个vue3.0不带ts的项目,幸好项目刚创建没多久,还可以修改

• 当然自己从头创建项目的话,需要ts在一开始的初始化搭建中就已经选择了带ts的选项,搭建完毕之后也就不再需要做些什么
• 如果搭建完毕了没有,那要做个选择,是重新搭建还是改一下,改的话就需要以下操作
  /src/main.js，重命名为/src/main.ts
  /src/index.html，引入的main.js，改成main.ts
  /src/App.vue，<script> 修改为 <script lang="ts">
  安装TypeScript

3.配置路径处理模块

//安装ts的类型声明文件
//yarn add @types/node -D
//通过配置alias来定义路径的别名
resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@coms': path.resolve(__dirname, 'src/components')
    }
  }

4.配置scss全局变量

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/scss/_theme.scss";`
      }
    }
  }

5.配置按需加载

import styleImport from 'vite-plugin-style-import'
plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'vant',
        esModule: true,
        resolveStyle: (name) => {
          return `vant/es/${name}/style/css`;
        },
      }]
    })
  ]

6.配置分包

rollupOptions: {
      treeshake: false,
      output: {
        manualChunks (id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    }

7.配置路由

yarn add vue-router@next --save之后创建router文件夹,创建index.ts,内容按照router配置书写

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

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/home",
      name: "Home",
      alias: "/",
      component: () => import("../pages/Home.vue")
    }
  ]
})

export default router;

路由需要在入口文件内app.use(router);去加载路由

8.集成vuex(用了再集成)

yarn add vuex@next --save之后创建store文件夹和index,ts,内容按照寻常vuex使用

import { createStore } from "vuex";

const store = createStore({
  modules: {
    home: {
      namespaced: true,
      state: {
        count: 1
      },
      mutations: {
        add(state){
          state.count++;
        }
      }
    }
  }
})

export default store;

路由需要在入口文件内app.use(store);去加载路由

整体配置如下,cdn配置与模块引入不做赘述

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
// 路径处理模块
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    importToCDN({
      modules: [
        autoComplete('vue'),
        autoComplete('axios'),
        autoComplete('lodash'),
        {
          name:'vue',
          var:'Vue',
          path:'https://cdn.jsdelivr.net/npm/vue@next'
        },
        {
            name:'vuex',
            var:'Vuex',
            path:'https://cdn.jsdelivr.net/npm/vuex@4.0.2/dist/vuex.global.prod.js'
        },
        {
            name:'vue-router',
            var:'VueRouter',
            path:'https://cdn.jsdelivr.net/npm/vue-router@4.0.10/dist/vue-router.global.prod.js'
        },
        {
          name:'vant',
          var:'vant',
          css: 'https://cdn.jsdelivr.net/npm/vant@next/lib/index.css',
          path:'https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js'
        }
      ]
    })
  ],
  resolve: {
    // 定义别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        charset: false,
        additionalData: `@import "@/assets/scss/_theme.scss";`
      },
      less: {
        javascriptEnabled: true
      }
    }
  },
  build: {
    target: 'modules',
    outDir: 'dist',
    assetsDir: 'static',
    minify: 'terser', // 混淆器,terser构建后文件体积更小
    sourcemap: false,
    rollupOptions: {
      treeshake: false,
      output: {
        manualChunks (id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    }
  },
  server: {
    port: 8080, // 端口号
  },
})