这是我参与「第五届青训营」伴学笔记创作活动的第 15 天

Vite简单上手

操作

一个字快！ npm init vue@latest ****npm create vite@latest ****pnpm create vue@latest (我常用)

pnpm create vite xx --template vue-ts

npm init vue@latest  // 创建项目
cd xx
npm install // 安装选择的依赖，一路enter就不用
npm run dev 
npm run build // 打包


// cli 
// 安装或者升级
npm install -g @vue/cli 
// 保证 vue cli 版本在 4.5.0 以上
vue --version
// 创建项目
// vue create my-project
// Please pick a preset - 选择 Manually select features
// Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
// Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
// Use class-style component syntax - 直接回车
// Use Babel alongside TypeScript - 直接回车
// Pick a linter / formatter config - 直接回车
// Use history mode for router? - 直接回车
// Pick a linter / formatter config - 直接回车
// Pick additional lint features - 直接回车
// Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
// Save this as a preset for future projects? - 直接回车

npm init @vitejs/app  
yarn create @vitejs/app

关闭语法检查

// vue.config.js
module.exports = {
  // 选项...
  lintOnSave: false // 关闭eslint语法检查
}

配置@

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

export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': {},
  },
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

插件安装

less：npm i less-loader less --save-dev

配置scss 和 less

juejin.cn/post/698135…

vue add style-resources-loader  // 可选  全局自动化导入

npm install node-sass sass-loader sass -D

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: ['./src/assets/styles/variable.scss']
    }
  }
})



// vite.config.js
import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: "@import 'src/assets/styles/index.scss';", //
      },
    },
  },
});

原理学习

特性特点

冷服务启动（不进行打包）、ES6 import 在开发预览中，它是不进行打包的。
开发中热更新开发的时候，只要一保存，结果就会更新。
按需进行编译、不会刷新全部DOM
Vite不仅支持样式文件（css）,还支持JSON文件的引入，方法：import'./assets/app.css'

Vite搭建开发环境

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts

Vue

npm init vite-app <project-name>  // 目前是 npm init vue@latest
  cd <project-name>
  npm install
npm run dev

yarn create vite-app <project-name>
  cd <project-name>
  yarn
yarn dev

|-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    -- 项目配置文件，包管理、项目名称、版本和命令

React

mkdir React-vite
cd React-vite
// npm init
npm init vite-app --template react
npm install

Vite简单上手 | 青训营笔记 第 15 天