Vue环境搭建与配置

1.Node版本管理工具——NVM

注意：NVM安装前必须保证卸载干净Node.js(在控制面版或者应用列表中卸载nodejs)

NVM安装步骤

https://github.com/coreybutler/nvm-windows/releases  下载文件（nvm-setup.exe）

NVM安装步骤：
	1. 下载地址 https://github.com/coreybutler/nvm-windows/releases  
	2. 下载文件（nvm-setup.exe） 双击下载文件（nvm-setup.exe）安装
	3.安装过程中需要配置两个路径：
		nvm路径 ：D:\Node\nvm
		nodejs路径：D:\Node\nvm\nodejs
	使用nvm会将对面版本的nodejs下载到D:\Node\nvm中，
	使用nvm use命令，会将对面node版本文件复制到D:\Node\nvm\nodejs 工作区。
NVM下载完成验证： nvm version，注意正常安装会自动配置上述两个路径到系统环境变量中

NVM常用命令如下

nvm list available    # 显示可以安装的所有nodejs版本
nvm install <version>  # 安装指定版本的nodejs
nvm ls  # 显示已安装版本列表
nvm use [version]  # 使用指定版本node
nvm uninstall <version> # 卸载指定版本node

Node下载完成验证：
node -v
npm -v

配置Nodejs的全局安装路径

配置NVM下总的Nodejs的全局安装路径（凡是npm install <包>  -g 下载的包全存在这里面）：
在系统环境变量中添加
变量名：NODE_PATH
D:\Node\nvm\node_cache
D:\Node\nvm\node_global

执行命令
npm config set prefix "D:\Node\nvm\node_global"
npm config set cache "D:\Node\nvm\node_cache"

2.镜像管理工具——NRM

输入npm install -g nrm 后回车即可全局安装NRM镜像管理工具

NRM常用命令

# 查看镜像列表
nrm ls
# 查看当前使用的镜像
nrm current 
# 添加镜像
nrm add <名称> <远程地址或私服地址>
# 删除镜像
nrm del <名称>
# 切换镜像
nrm use <名称> 
# 测试镜像网络传输速度
nrm test <名称>
# 查看nrm版本号
nrm <-version | -V> 
# 查看nrm相关信息
nrm <-help | -h>
# 打开镜像主页
nrm home <名称> [browser]
# 上传npm包或命令程序
nrm publish [<tarball>|<folder>]

3.包管理工具（npm 、pnpm、yarn、cnpm）安装

npm install -g pnpm 
npm i -g yarn 
npm i cnpm -g

4.创建Vue项目

构建Vue项目——Vue-Cli脚手架

1.全局安装Vue-Cli构建Vue项目(默认使用的是Webpack)
npm install -g  @vue/cli  #安装
npm uninstall -g vue-cli # 卸载
vue --version #检验是否安装成功

2.脚手架创建Vue项目的两种方式：
1.vue create  <project-name>
2.vue ui

勾选项目配置说明：
Babel 插件允许我们使用ES6模块化语法，默认选中，转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
TypeScript js的升级版本，TS语法中增加了强类型定义
Progressive Web App (PWA) Support // 渐进式Web应用程序，如果项目是移动端，选择
Router 路由
vuex 状态管理
CSS Pre-processors 样式预处理：如果使用了SCSS 和 less 语法，勾选此选项
Linter / Formatter 代码格式语法检测
Unit Testing 测试工具
E2E Testing 测试工具

3.运行Vue项目
npm run serve

构建Vue项目——Vite

Vue CLI 现已处于维护模式!
现在官方推荐使用 create-vue 来创建基于 Vite 的新项目
Vite 的特点：
1.快速的冷启动，不需要等待打包
2.即时的热模块更新
3.真正的按需编译，不用等待整个项目编译完成

执行安装命令
npm init vite@latest 或者 npm create vite@latest
yarn create vite
pnpm create vite

输入项目名称；
选择使用的框架；
选择使用的脚本语言；

5.项目必要配置

-D：安装在开发环境中；-S安装在生产环境下

node 的常用的语法提示——@types/node

npm install @types/node --save-dev

env.d.ts 定义根目录类型声明文件

1.写3个斜线，把node_modules里面的vite文件夹里面的client客户端类型声明文件导入到这个文件里
2.写能让ts认识.vue文件的类型声明文件
3.写env.development和env.production文件里的自己创建的环境变量的类型声明文件，在import.meta.env.自己创建的变量
env.d.ts

/// <reference types="vite/client" />                           

declare module "*.vue" {
    import { DefineComponent } from "vue";
    const component:DefineComponent<{},{},any>
    export default component
}

然后在tsconfig.json中的include加入声明文件。要不然在ts文件中导入vue模块会报错
tsconfig.json

"include": [
    "src/**/*.ts", 
    "src/**/*.d.ts", 
    "src/**/*.tsx", 
    "src/**/*.vue",
    "src/**/*.js",
    "./*.d.ts",
    "./components.d.ts",
    "./auto-imports.d.ts",
     "./types/**/*.d.ts"
  ],

使用环境变量文件配置环境信息

1.在项目根目录中，创建以下环境变量文件(环境文件的命名必须以 .env 为前缀)：

.env.dev 用于开发环境的项目全局变量的声明。
.env.prod: 用于生产环境的项目全局变量的声明。
.env.test: 用于测试环境的项目全局变量的声明。

.env.[mode] : 如果你有其他环境（如测试环境），可以创建对应的环境变量文件。(其中 mode 是在 vite 启动项目时使用的环境模式名称）

2.在上述环境变量文件添加常见环境变量:
在 .env.[mode] 文件中声明的环境变量需要:
以 VITE_ 开头,
环境变量的值后面不能加上分号

# 环境
VITE_ENV = 'dev'

VITE_API_URL

3.在 Vite 项目中，修改vite.config.ts文件来加载相应的环境变量文件（环境变量使用）

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode })=>{  
	const env = loadEnv(mode, process.cwd());  
	return{ 
		define: {      
			// 注入环境变量      
			'process.env': env,    
		}     
		plugins: [      vue(),      ],    
	}
});

4.修改package.json文件中的脚本命令，以指定不同的构建模式
Vite会根据不同的命令行参数和模式来选择对应的环境文件。默认情况下，开发模式会加载.env.development,而构建生产版本时会加载.env.production。
在package.json的scripts字段中，可以通过“–mode”参数来指定Vite运行的模式，例如开发模式下，可以使用Vite --mode development 来指定加载.env.development文件。

"scripts": {
	"serve": "yarn dev --host",
    "dev": "vite --mode dev",
    "build": "vue-tsc && vite build", 
    "preview": "vite preview"
  },

服务器代理

vite.config.ts

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))
    }
  },
  // 服务器代理
  server: {
    proxy: {
      "/foo": {
        target: "https://www.maizuo.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/foo/, ""),
       },
    },
  },
  // 服务器代理结尾
})

@别名配置

vite.config.ts

export default defineConfig({
  plugins: [vue()],
      // ↓解析配置
    resolve: {
      // ↓路径别名
      alias: {
        "@": resolve(__dirname, "./src")
      }
    }
})

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    ...
 
    // 配置@别名
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }, 
  },
}

通过插件unplugin-vue-components 和 unplugin-auto-import自动导入注册组件和第三方库【示例Element-Plus和Vant3】

unplugin-vue-components ： 插件的作用是自动导入第三方库或组件。
unplugin-auto-import：插件的作用是自动注册项目内的components组件。
在项目文件路径下安装插件:
npm install -D unplugin-vue-components unplugin-auto-import

vite.config.ts

//子组件自动引入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";

//Elment-plus解析
import { ElementPlusResolver,VantResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
    plugins: [
        vue(),
        Components({
            // 指定组件位置，默认是src/components
            dirs: ['src/components'],          
            // 组件的有效文件扩展名。
            extensions: ["vue"],
            // 搜索子目录
            deep: true,
            // 配置文件生成位置
            dts: 'src/components.d.ts',         
            // ui库解析器，也可以自定义
            resolvers: [VantResolver(), ElementPlusResolver ()],    
      }),
      AutoImport({
	     imports: ["vue", "vue-router", "pinia"],    必须
	     //第三方组件库的解析器
	     resolvers: [ElementPlusResolver()],   必须
	     //指定生成文件位置
	     dts: "src/auto-imports.d.ts",       必须
        }),
	]
})

6.项目可选配置

Axios

前端测试：yapi官网来模拟后台接口，发送模拟数据
后端测试：postman工具

封装原生的Ajax异步请求
1.在项目目录下执行安装指令：
npm install axios --save --legacy-peer-deps

--save --legacy-peer-deps 解决NPM版本造成的安装失败问题

2.导入axios
import axios from 'axios'

Element-Plus

1.安装命令：
npm install element-plus --save
yarn add element-plus

2.按需引入
(1)首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件(-D：安装在开发环境中；-S安装在生产环境下)
	npm install -D unplugin-vue-components unplugin-auto-import
(2)在 Vite 的配置文件vite.config.ts中 添加如下代码
	import { defineConfig } from 'vite'
	import AutoImport from 'unplugin-auto-import/vite'
	import Components from 'unplugin-vue-components/vite'
	import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

	export default defineConfig({
 	 // ...
  	plugins: [
    	// ...
    	AutoImport({
      	resolvers: [ElementPlusResolver()],
   	 }),
    	Components({
      	resolvers: [ElementPlusResolver()],
   	 }),
 	 ],
	})
(3)在App.vue添加全局配置
<template>
  <el-config-provider :size="size" :z-index="zIndex">
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

Element Plus Icon

安装icon库:
npm install @element-plus/icons-vue

Element Plus中将Icon 封装成了组件形式，我们不能想element-ui中那样使用了。
<!--原来使用方式-->
<i class="el-icon-edit"></i>
 
<!--现在使用方式-->
 <el-icon :size="size" :color="color">
   <edit></edit>
 </el-icon>

VueRouter

安装指定版本： npm i vue-router@具体版本号
直接下载默认安装新版本：npm install vue-router
卸载：npm uninstall vue-router

在src目录下创建router文件夹，并创建index.ts文件：

import { createRouter, createWebHashHistory } from "vue-router"
 
import Home from "@/components/Home.vue"
import About from "@/components/About.vue"
 
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/home', component: Home },
        { path: '/about', component: About },
    ]
})
 
export default router

在main.ts导入并挂载路由模块：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router/index';

const app = createApp(App);
app.use(router);

app.mount('#app')

页面使用：

<router-link to="/home">首页</router-link> |
<router-link to="/about">关于</router-link>
<hr>
<router-view></router-view>

组成：
	（1）VueRouter路由器类，根据路由请求在路由视图中动态渲染选中的组件
	（2）<router-link>: 请求链接组件,浏览器会解析为a标签
	（3）<router-view>: 动态视图组件，用来渲染展示与路由路径对应的组件

状态管理Pinia

安装下载：

yarn add pinia
# 或者使用 npm
npm install pinia

引入：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia';

const pinia = createPinia()
const app = createApp(App);
app.use(pinia);
app.mount('#app')

在src目录下创建router文件夹，并创建user.ts文件：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: {}
  }),
  actions: {
    SetUserInfo(data: any) {
      this.userInfo = data
    }
  }
})

选项式写法:
export const useHomeStore = defineStore('homeStore', {
	state() {
		return {}
	},
	actions: {},
	// 本地持久化存储
	// 需要安装: npm i pinia-plugin-persistedstate -s
	persist: {
		endblaed: true
	}
})



组合式写法：
import { ref, reactive } from 'vue'
export const useHomeStore = defineStore('homeStore', () => {
	let data_first = ref('')
	const handleActions = () => {}
})

使用

import { useUserStore } from '@/store/user'

const store: any = useUserStore()

console.log(store.userInfo)

Pinia持久化插件—— pinia-plugin-persistedstate
pinia 和 vuex 一样，数据是短时的，只要一刷新页面，数据就会恢复成初始状态，为了避免这个问题，可以对其采用持久化保存方法。持久化保存的原理是在 pinia 中数据更新时，同步保存到 localStorage 或 sessionStorage 中，刷新后从本地存储中读取数据，你可以选择自己去写
安装：

 npm i pinia-plugin-persistedstate

导入：

import persist from 'pinia-plugin-persistedstate'
app.use(createPinia().use(persist))

使用：

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  ...
  return {
    count,
    doubleCount,
    increment
  }
}, {
  persist: true
})

css预处理语言——SCSS

安装命令：
npm i sass sass-loader --save-dev

使用方式：
<style lang="scss" scoped>
@import "./HelloWorld.scss";
</style>

在vite.config.ts配置SCSS全局共享变量:
//需要放置的代码在这里********************
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 public.scss 这样就可以在全局中使用 public.scss中预定义的变量了
        // 给导入的路径最后加上 ; 
        additionalData: '@import "@/assets/css/public.scss";'
      }
    }
  }

7.打包发布

安装 jsx 语法插件——组件库编写需要

因为组件库一般都是 jsx 语法编写，所以要加上 @vitejs/plugin-vue-jsx，打包成 lib

npm i @vitejs/plugin-vue-jsx

手动ts类型提示

1.新建types/index.d.ts类型声明文件
2.在types/index.d.ts中把packages导出的所有东西的类型都声明一下
3.在package.json中注明ts类型声明文件的入口

"types": "types/index.d.ts"
"files": [
    "dist/*",
    "package",  
    "types"
  ],

使用插件生成ts类型提示——vite-plugin-dts

需要一个xx.d.ts文件，把这包暴露出去的所有东西的类型都声明一下。然后在packege.json的types字段指向该文件
使用 vite-plugin-dts会自动把包导出的方法和对象对应的ts类型生成 .d.ts类型声明文件

npm i vite-plugin-dts -D

import dts from ‘vite-plugin-dts’
plugins: [dts()]}) // 重点是这一行写了就行

在package.json中,把types字段指向自动生成的dist目录下得index.d.ts

编辑package.json

package.json 文件里面有很多字段要填写，否则不能正确发布。最重要的是以下几个

• name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
• version: 版本号，不能和历史版本号相同。
• files: 配置需要发布的文件。
• main: 入口文件，默认为 index.js，这里改为 dist/组件库名称.umd.js。
• module: 模块入口，这里改为 dist/组件库名称.es.js。

{
  "name": "commom-ui",
  "private": false,     必须
  "version": "0.0.1",
  "type": "module",
  "main": "dist/commom-ui.umd.js",    必须
  "module": "dist/commom-ui.es.js",    必须
  "files": [        必须
    "dist/*",
    "commom-ui.d.ts"
  ],
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vitejs/plugin-vue-jsx": "^3.1.0",         必须
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@types/node": "^20.12.12",
    "@vitejs/plugin-vue": "^5.0.4",
    "sass": "^1.77.2",
    "sass-loader": "^14.2.1",
    "typescript": "^5.2.2",
    "vite": "^5.2.0",
    "vue-tsc": "^2.0.6"
  }
}

编辑vite.config.ts

vite.config.ts

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

//打包
import vueJsx from "@vitejs/plugin-vue-jsx";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx({})],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
      package: resolve(__dirname, "./package"),
    },
  },
  build: {
    rollupOptions: {
      // 请确保外部化那些你的库中不需要的依赖
      external: ["vue"],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: "Vue",
        },
      },
    },
    lib: {
      entry: "packages/index.ts",
      name: "common-ui",
      fileName: (format) => `common-ui.${format}.js`,
    },
  },
});

发布NPM

1. 先查看 npm 的 registry; npm config get registry ; 如果显示的不是官方源，就要改回来
2. 登录npm : npm login
3. 发布到npm: npm publish (注：上传的npm包，在72小时后不可删除，如果是测试用的包，记得72小时内删除)
4. 在npm官网中登录自己的账号查看是否发布成功
5. 去弄一个demo项目来安装我们刚刚发布的依赖验证一下

一个具有注脚的文本。¹

---

1. 注脚的解释 ↩︎