创建vue3+vite 的初始项目傻瓜式操作(亲测版本)

详细的使用方法：
所有内容都会持续更新~~

• 老年人备忘录

VUE3+TS+SETUP 使用备忘录

可以使用PNPM 新的包管理器
pnpm 是新一代包管理工具，为什么叫 pnpm 呢，是因为 pnpm 作者对现有的包管理工具，尤其是 npm 和 yarn 的性能特别失望，所以起名叫做 performance npm，即 pnpm（高性能 npm）

npm install pnpm -g

跟npm一样切换个源
pnpm config get registry

pnpm config set registry=http://registry.npm.taobao.org/

报错：无法加载文件 AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本
以管理员权限打开 PowerShell 终端。
1、运行 Get-ExecutionPolicy 命令，查看当前的执行策略设置。
2、如果策略设置为 Restricted 或 Undefined，表示禁止执行脚本。你可以尝
3、试将其更改为 RemoteSigned。
4、运行 Set-ExecutionPolicy RemoteSigned 命令进行更改。确认你是否希望更改策略，并输入 “Y” 确认更改。

如果通过PNPM 安装的话只需要把NPM替换成PNPM；

npm init vite@latest 

此处切换npm源，安装更快

#查看当前源
npm config get registry

#更换为国内镜像
npm config set registry=http://registry.npm.taobao.org/

配置所需依赖：

npm install @types/node --save-dev

在src目录下新建router文件夹，在router里创建index.ts文件
npm install vue-router@4

css 预处理器 sass（看习惯）

npm install -D sass sass-loader

Pinia 是 Vue 3
的一个插件化状态管理解决方案，用于管理在应用程序中共享的状态。它提供了一种轻量级、直观且易于使用的方式来组织和共享应用程序中的数据。与传统的
Vue 2.x 中的 Vuex 不同，Pinia 是为 Vue 3 生态系统而设计的，并且支持 Vue 3 的新特性和优化。

pinia-plugin-persistedstate 是 Pinia
的一个插件，它提供了一种在浏览器持久化存储中保存和还原状态的功能。使用此插件，你可以在应用程序重新加载或重新启动后，从存储中恢复之前保存的状态，避免数据丢失。

你可以按照以下步骤集成 pinia-plugin-persistedstate 插件到 Pinia 中：

npm install pinia-plugin-persistedstate

引入插件：在创建 Pinia 实例之前，将 pinia-plugin-persistedstate 导入并使用。

import { createPinia } from 'pinia';
import { createPersistedState } from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(createPersistedState());

npm install axios

npm install element-plus --save
Vite 入口文件中导入main.js
import ElementPlus from 'element

安装相关包

  npm i -D vite-plugin-windicss windicss 

Vite 配置中添加插件 （vite.config.js）

import WindiCSS from 'vite-plugin-windicss'
export default {
  plugins: [
    WindiCSS(),
  ],
}

Vite 入口文件中导入 virtual:windi.css （main.js）

import 'virtual:windi.css'

# 页面标题
VITE_APP_TITLE = IOT管理
# 开发环境配置
ENV = 'development'
# 开发环境
VITE_APP_BASE_API = '/api'
# 配个后台地址
VITE_SERVE = 'http://0.0.0.0:3000'
# 路由懒加载
#VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production用于保存生产模式下的各种环境变量

# 页面标题
VITE_APP_TITLE = IOT管理
# 开发环境配置
ENV = 'production'
# 开发环境
VITE_APP_BASE_API = '/prod-api'
# 配个后台地址
VITE_SERVE = 'http://0.0.0.0:3000'
# 路由懒加载
#VUE_CLI_BABEL_TRANSPILE_MODULES = true

默认情况下，开发服务器 (dev命令) 运行在 development (开发) 模式，而 build命令则运行在 production(生产) 模式。

Vite中获取.env 文件中的环境变量

需要使用loadEnv方法，加载当前模式mode下对应的 .env 文件，获取文件中对应的环境变量。参考Vite官网：

process.cwd()为项目根目录（index.html 文件所在的位置），把.env.development和.env.production都配置在项目根目录下，就可通过loadEnv来加载根目录下的所有.env文件，通过mode获取当前模式的环境变量。env中就保存着各种模式下对应的环境变量。
原配置

import { defineConfig,loadEnv } from 'vite' 
export default defineConfig({
    // webpack-dev-server 相关配置
  server: {
    host: '0.0.0.0',
    //port: 8080,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      '/api': {
        target: 'http://0.0.0.0:9004',  //http 一定要不然会无法解析跳转,0.0.0.0改成自己后端IP
        changeOrigin: true,
         rewrite: path => path.replace(/^\/api/, '')
      }
    },
    disableHostCheck: true
  },

于是可以把配置代理改写成：

import { defineConfig,loadEnv } from 'vite' 
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  // webpack-dev-server 相关配置
  return {
    server: {
      host: '0.0.0.0',
      //port: '3000',
      open: true,
      proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy [env.VUE_APP_BASE_API]
      [env.VITE_APP_BASE_API]: {
          target: env.VITE_SERVE,  //http 一定要不然会无法解析跳转
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, ''),
      }
    },
    disableHostCheck: true
  },

  resolve: {
    alias: {
      "@": resolve(__dirname, 'src')
    }
  },
  plugins: [WindiCSS(), vue()],
  }

})