vue前端开发环境- elment plus/vit代理配置
一、 npm安装
1.老版本npm安装
- npm是前端js库的包管理工具，后续js的安装都可以依赖npm，大致可以理解成python的pip。
- npm依赖node.js, 安装好 node.js后，npm默认就安装好了，而安装指定版本node.js最为简单的方式是先安装nvm，nvm支持安装多个node.js版本，以及在node版本间切换
在mac中安装nvm最简单的方式是：
brew install nvm
#其它nvm命令
nvm version # 查看nvm版本
nvm list #列出已安装的node版本
注: 安装node的版本时要注意，node.js的版本决定了npm版本（官网可查询），而每个npm中可以安装的js库的版本范围是不一样的，注意选择好版本
# nvm命令
nvm install 12.19.0 # 安装指定的node版本
nvm use 12.19.0 #切换到指定的node版本
# npm 命令
node -v # 查看当前node版本
npm -v # 查看npm的版本
npm install <module_name>[@x.xx.x] [-g] #安装指定模块 @x.xx.x为指定模块版本， -g 为全局安装
npm uninstall <module_name> #卸载指定模块
npm list -g
npm list <module_name> # 查看指定模块信息
2. 最新版npm安装（202206）
1). 最新版本的nvm安装
参考官网：https://github.com/nvm-sh/nvm#use-a-mirror-of-node-binaries
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
安装目录在.nvm中
需确定.bashrc中相关环境变量设定脚本已经存在（nvm官网有相关说明）
#nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
2). 安装最新的node
nvm install --lts # 安装最新的长期支持版本
若安装失败，可能需要替换node镜像，官网说明：
在.bashrc中需添加：
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node/
添加镜像后再安装node
3. npm安装js库的本地安装与全局安装
本地安装：
将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。 可以通过 require() 来引入本地安装的包。
全局安装：
- 将安装包放在 /usr/local 下或者你 node 的安装目录。
- 可以直接在命令行里使用。
二、vue安装
vue可以作为一个普通的js库安装，利用npm 安装命令安装即可。
npm install [email protected]
但要搭建vue脚手架，搭建vue脚手架有两种方式
1. 使用vue-cli搭建脚手架
vue提供一个vue-cli组件，用于创建模板工程，官网：https://cli.vuejs.org/zh/guide/installation.html
npm安装均区分全局安装和本地安装， 全局会带-g， , 安装vue-cli, 主要用于新建脚手架工程， 建议全局安装 执行
npm install -g vue-cli # (vue cli v2.X 版本不支持 vue create， 所以需要选用vue cli v3.x之上的)
npm install -g @vue/cli # （vue cli v3.x）
使用vue-cli创建vue工程模板 (element ui 官网有提供模板)
vue create <project_name> # 会有一些选项需要选择，按需选择就好
官网信息：
详细使用可以参考vue-cli官网
2.直接使用 ui框架提供的模板
对于使用 像element ui提供的模板的，直接从ui框架提供的git地址clone就好， 对于element 2.x ，建议使用vue-cli 创建， 对于使用element plus（即 element 3.x），则最好使用官方模板（当前202206，vue-cli创建的模板对 element 3.x支持不够友好），对于element 3.x的安装，参考本文第三部分
三 、element plus 安装
1.拉取官网vite 模板
vite是代替老版 webpack的一个新的打包库，作者也是尤大，网络上有很多vite和webpack的比较文章，vite相比webpack有一些优势，被很多人视为下一代的打包库，故后续介绍使用element vite模板
参考官网 https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%89%8B%E5%8A%A8%E5%AF%BC%E5%85%A5，指明了最新的vite模板地址：https://github.com/element-plus/element-plus-vite-starter
根据git介绍，执行以下命令即可使用
git clone https://github.com/element-plus/element-plus-vite-starter #从git拉取工程
cd element-plus-vite-starter # 进入目录
npm i #安装
npm run dev
注：拉取完后，可以删除 element-plus-vite-starter 中.git 文件夹，解除与git的绑定； 也可以不用git clone 拉取，直接在git上下载 .zip包；在 npm i前修改文件夹名。
2. vite中一些重要的功能
vite中的一些配置与webpack差异较大，其中对于proxy的设定有必要说明下，
vite的配置文件为vite.config.ts， 直接修改element-plus-vite-starter目录下的vite.config.ts如下：
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' // unplugin-auto-import 用于自动引入vue的一些api， 如 ref，computed等，引入后不用再组建中单独再import，可以直接使用， 相关配置在 plugins的 AutoImport 部分，进一步了解可以查阅 github官网
import Components from 'unplugin-vue-components/vite' // unplugin-vue-components 插件，用于自动引入ui 组键 和自定义组键， 相关配置在 plugins的 Components部分，进一步了解可以查阅 github官网
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 用于自动解析element plus组键
import Unocss from 'unocss/vite'
import {
presetAttributify,
presetIcons,
presetUno,
transformerDirectives,
transformerVariantGroup,
} from 'unocss'
const pathSrc = path.resolve(__dirname, 'src')
// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {
let result = {
base: "/root_pach/", // 给所有静态资源元素添加默认的路径； 如地址 /test/pic.png 变为 /root_path/test/pic.png
resolve: {
alias: {
'~/': `${pathSrc}/`,
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~/styles/element/index.scss" as *;`,
},
},
},
plugins: [
vue(),
AutoImport({
imports: [
// presets
'vue',
'vue-router',
// custom
{
'axios': [
// default imports
['default', 'axios'], // import { default as axios } from 'axios',
],
}
],
resolvers: [ElementPlusResolver()],
dts: 'src/auto-imports.d.ts',
}),
Components({
// allow auto load markdown components under `./src/components/`
extensions: ['vue', 'md'],
// allow auto import and register components used in markdown
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
}),
],
dts: 'src/components.d.ts',
}),
// https://github.com/antfu/unocss
// see unocss.config.ts for config
Unocss({
presets: [
presetUno(),
presetAttributify(),
presetIcons({
scale: 1.2,
warn: true,
}),
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
]
}),
],
}
// *******以下为给dev添加代理的方法*******
// 给dev添加独有代理某些情况下可以方便调试
if (command === 'serve') {
// dev 独有配置
result["server"] = {
...result["server"],
proxy: {
'/test': 'http://www.baidu.com'
}
}
return result
} else {
// command === 'build'
// build 独有配置
return result
}
})
- 重点1：是if (command === ‘serve’) {} 部分， serve对应 dev独有配置， command===‘build’ 对应build独有配置
- 重点2： 给所有静态资源元素添加默认的路径； 如地址 /test/pic.png 变为 /root_path/test/pic.png
有用的模板：
https://github.com/sxzz/element-plus-best-practices
https://github.com/mh185/vue3-element-templete