admin管理员组文章数量:1531794
Vue环境搭建与配置
- 1.Node版本管理工具——NVM
- NVM安装步骤
- NVM常用命令如下
- 配置Nodejs的全局安装路径
- 2.镜像管理工具——NRM
- NRM常用命令
- 3.包管理工具(npm 、pnpm、yarn、cnpm)安装
- 4.创建Vue项目
- 构建Vue项目——Vue-Cli脚手架
- 构建Vue项目——Vite
- 5.项目必要配置
- node 的常用的语法提示——@types/node
- env.d.ts 定义根目录类型声明文件
- 使用环境变量文件配置环境信息
- 服务器代理
- `@`别名配置
- 通过插件unplugin-vue-components 和 unplugin-auto-import自动导入注册组件和第三方库【示例Element-Plus和Vant3】
- 6.项目可选配置
- Axios
- Element-Plus
- Element Plus Icon
- VueRouter
- 状态管理Pinia
- css预处理语言——SCSS
- 7.打包发布
- 安装 jsx 语法插件——组件库编写需要
- 手动ts类型提示
- 使用插件生成ts类型提示——vite-plugin-dts
- 编辑package.json
- 编辑vite.config.ts
1.Node版本管理工具——NVM
注意:NVM安装前必须保证卸载干净Node.js(在控制面版或者应用列表中卸载nodejs)
NVM安装步骤
https://github/coreybutler/nvm-windows/releases 下载文件(nvm-setup.exe)
NVM安装步骤:
1. 下载地址 https://github/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",
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
- 先查看 npm 的 registry; npm config get registry ; 如果显示的不是官方源,就要改回来
- 登录npm : npm login
- 发布到npm: npm publish (注:上传的npm包,在72小时后不可删除,如果是测试用的包,记得72小时内删除)
- 在npm官网中登录自己的账号查看是否发布成功
- 去弄一个demo项目来安装我们刚刚发布的依赖验证一下
一个具有注脚的文本。1
注脚的解释 ↩︎
版权声明:本文标题:Vue环境搭建与配置 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1725662583a1035478.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论