vite

官网地址:cn.vitejs.dev/guide/#over… (文档才是最好的)

vite的优势

以原生 ESM 方式服务源码。使用JavaScript 模块依赖于import和 export . 让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。

安装vite

// 兼容性注意
Vite 需要 [Node.js](https://nodejs.org/en/) 版本 >= 12.0.0。

创建项目

npm init @vitejs/app

选中你需要的模板

|-node_modules      -- 项目依赖包的目录
|-public            -- 项目公用文件
  |--favicon.ico    -- 网站地址栏前面的小图标
|-src               -- 源文件目录，程序员主要工作的地方
  |-assets          -- 静态文件目录，图片图标，比如网站logo
  |-components      -- Vue3.x的自定义组件目录
  |--App.vue        -- 项目的根组件，单页应用都需要的
  |--index.css      -- 一般项目的通用CSS样式写在这里，main.js引入
  |--main.js        -- 项目入口文件，SPA单页应用都需要入口文件
|--.gitignore       -- git的管理配置文件，设置那些目录或文件不管理
|-- index.html      -- 项目的默认首页，Vue的组件需要挂载到这个文件上
|-- package-lock.json --项目包的锁定文件，用于防止包版本不一样导致的错误
|-- package.json    -- 项目配置文件，包管理、项目名称、版本和命令

alias别名

因为使用了ts， node.js 不是内置。想用Typescript写node.js,需要引入第三方声明文件

// 安装types/nodes 使node.js 支持ts 
npm i  @types/node

import alias from "@rollup/plugin-alias";
const path = require('path')

export default defineConfig({
  plugins: [alias(),vue()],
  alias: {
    // 键必须以斜线开始和结束
    '/@/': path.resolve(__dirname, './src')
  }
})

环境配置

在根目录创建

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

Vite 仅执行 .ts 文件的翻译工作，并不执行任何类型检查。构建脚本中运行 tsc --noEmit 或者安装 vue-tsc 然后运行 vue-tsc --noEmit 来对你的 *.vue 文件做类型检查）

// 配置环境变量启动
{
"name": "vite-test",
 "version": "0.0.0",
 "scripts": {
 "dev": "vite",
   "build": "vue-tsc --noEmit && vite build", // vue-tsc --noEmit  使用来对ts的类型检测的插件
   "test":  "vite build --model test",   // 增加启动配置，model后面是添加的启动配置文件
   "serve": "vite preview"
   },
 "dependencies": {
 "vue": "^3.0.5"
   },
 "devDependencies": {
 "@vitejs/plugin-vue": "^1.2.1",
   "@vue/compiler-sfc": "^3.0.5",
   "typescript": "^4.1.3",
   "vite": "^2.1.5",
   "vue-tsc": "^0.0.15"
   }
 }

只有前缀为的变量VITE_才对Vite处理的代码公开。
使用,跟vue2有些区别，在vite.config.ts内读取不到，其它文件可以拿到
在文件内可以看到

vscode配置vue3.0+ts 模板片段

文件>代码片段
选中新建代码片段
将下面json 复制到json文件中

{
  "Print to console": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div class=\"\">\n",
      "  </div>",
      "</template>\n",
      "<script lang=\"ts\">",
      "// 不使用ts可以删除lang=ts"  
      "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
      "//例如：import 《组件名称》 from '《组件路径》';",
      "import {reactive,toRefs} from \"vue\"",
      "//定义ts数据类型",
      " interface dataProps{\n",
      " }",
      "export default{",
      "  name:\"\",",
      "//import引入的组件需要注入到对象中才能使用",
      "  components: {},",
      "//这里存放数据",
      "  setup() {",
      "   const data = reactive({\n",
      "   })",
      "    return {",
      "      data",
      "    }",
      "  }",
      "}",
      "</script>\n",
      "// 如果是其他预处理,可以改用其他"  
      "<style lang=\"scss\" scoped>",
      "</style>",
      "$2"
    ],
    "description": "Log output to console"
  }
}

vue-router (vue3需要使用4.0+版本）

1、安装 npm i vue-router@4.0.2 --save,安装4.0版本

2、index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
// 导入页面组件
const test = () => import('../views/test.vue')
const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        redirect: "/test"
    },
    {
        path: "/test",
        name: 'test',
        component: test,
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
})

export default router

// main.ts
// 需要导入，不要忘记（狗头）
import router from './router'
createApp(App).use(router).mount('#app')

配置预处理器 scss

安装npm i sass -D，可以直接使用sass语法了
vite.config.ts,全局引入scss文件

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/scss/global.scss";`//你的scss文件路径
      }
    }
  },

配置vuex

1、安装 npm install vuex@next --save

// store/index.ts
import { createStore } from 'vuex'
export default createStore({
  state: {
  },
    
  //...
})

// main.ts 文件

import store from './store'
createApp(App)
    .use(store)
    .mount('#app')

vite.config.ts

vite.config.ts的配置和解析

import { build, defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import alias from "@rollup/plugin-alias";
const path = require('path')

/*
  base的值
  绝对 URL 路径名，例如 /foo/
  完整的 URL，例如 https://foo.com/
  空字符串或 ./（用于开发环境）
*/

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",   // 开发环境和生产环境路径  如果放如的生产环境不是在根目录下，需要要加上放入文件的文件名 '/product'
  plugins: [alias(), vue()], // 用到的插件
  publicDir: 'testdir',
  mode: "development", // 环境  默认"development" 开发环境
  resolve: {
    // 别名
    alias: {
      // 键必须以斜线开始和结束
      '/@/': path.resolve(__dirname, './src')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'] // 导入时想要省略的扩展名列表，不建议省.vue
  },
  // css的配置
  css: {

  },
  logLevel: 'info',  // 控制台logo输出的级别
  clearScreen: true, //   vite清屏幕后找不到日志
  // 服务的配置
  server: {
    host: "127.0.0.1", // 主机名
    port: 3030, // 端口
    strictPort: true, // 端口被占用调用下个端口
    open: true,  // boolean | String 如果是boolean且为true 会自动打开浏览器。 配置是字符串 会被用作 URL 的路径名
    /*
      服务器代理地址，用于代理到后台的服务器。
    */
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567/foo',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      }
    },
    force:true,  // 强制使依赖预构建。
  },
  // 正式环境的配置
  build: {
    target:'modules', // 
    outDir:'dist', // 指定输出的路径，相当于项目根目录
    assetsDir:"assets", // 静态资源存放路径，相对于outDir
    assetsInlineLimit:4096, // 小于此配置的会被base64编码，0为完全禁用
    cssCodeSplit:true, // 启用/禁用css代码拆分  如果禁用整个项目所有css将会提取为一个css
    sourcemap:false, // boolen| inline 构建后是不是生产source map 文件
    brotliSize:true , // 启用和禁用压缩报告
    chunkSizeWarningLimit:500, // chunk大小警告
  },
  // 后端ssr
})

test 项目链接: gitee.com/Hemo0206/vi…

vite+ts 构建 vue3.0项目