本文详细介绍了如何在Vue.js项目中安装和使用Vue CLI，创建并配置Vue 2和Vue 3项目，以及设置淘宝镜像。同时，讲解了Element UI在Vue 2和Vue 3中的安装与引入，以及Element Icon的使用。此外，还涵盖了axios的安装、封装和跨域处理，以及如何使用less、echarts、js-cookie等库。最后，讨论了如何在Vue项目中集成vue-fragment、vue-video-player、video.js、vue-dplayer、markdown编辑器、wangeditor、vxe-table、vue-codemirror-lite、v-clipboard等组件和工具。
文章目录
安装
node.js
建议选择 前面一个
vue.js
安装vue-cli
安装 cli
npm install -g @vue/cli
检查 cli
vue --version
或者
vue -V
升级cli
npm update -g @vue/cli
创建vue项目
创建vue项目
vue create vue
- 回车表示选好了 进行下一步
选择 Manually select features
上下箭头移动 空格选中
选择babel、router 和 vuex
Choose Vue version（选择VUE版本）
Babel（JavaScript 编译器，可将代码转换为向后兼容）
TypeScript（编程语言，大型项目建议使用）
Progressive Web App (PWA) Support-APP使用
Router（路由）
Vuex（Vuex）
CSS Pre-processors（css预处理）
Linter / Formatter（代码风格/格式化）
Unit Testing（单元测试）
E2E Testing（e2e测试）
vue2 选择 2.x
vue3 选择 3.x
输入Y
选择 In package.json
输入N
然后系统就会开始创建了
设置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
运行vue项目
npm run serve
项目打包
npm run build
Element
vue2
安装 element ui
npm install element-ui -S
vue2项目引入 element ui
main.js 中写入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
如下 插入即可
vue3
安装element plus
npm install element-plus --save
vue3项目引入 element plus
main.js 中写入
import element from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import 'dayjs/locale/zh-cn'
app.use(element, {
locale: zhCn,
})
如下 插入即可
vue 使用 element 的 icon图标
vue2可以直接使用icon图标
vue3 引入icons-vue
npm install @element-plus/icons-vue --save
main.js 中写入
import * as Icon from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(Icon)) {
app.component(key, component)
}
如下 插入即可
axios
安装axios
npm i axios -S
requset.js 封装
main.js 同级目录下 requset.js
import axios from 'axios'
const request = axios.create({
baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 设置请求头
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
import axios from 'axios'
import {ElNotification} from "element-plus";
const request = axios.create({
baseURL: 'http://localhost:9090', // 注意！！ 这里是全局统一加上了 后端接口前缀 前缀，后端必须进行跨域配置！
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 设置请求头
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log(error) // for debug
if(error.response.status !== 200) {
ElNotification({
type: 'error',
message: '接口异常'
})
}
return Promise.reject(error)
}
)
export default request
跨域问题
module.exports = {
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: false,
productionSourceMap: false,
devServer: {
// vue启动的端口
port: 8080,
host: '0.0.0.0',
open: true, // 设置代理
proxy: {
// 设置拦截器 拦截器格式:斜杠+拦截器名字(名字自己定)
'/api': {
// 代理的目标地址
target: 'http://localhost:9090', // 是否设置同源
changeOrigin: true, // 路劲重写
pathRewrite: {
// 选择忽略拦截器中的单词
'^/api': ''
}
}
},
},
transpileDependencies: true,
}
使用
vue2
main.js
import request from "@/utils/request"
Vue.prototype.request = request
类似这样即可
less
安装
npm i less -S
使用
echarts
安装 echarts
npm i echarts -S
使用 echarts
在需要的页面添加
import * as echarts from 'echarts'
js-cookie
安装js-cookie
npm i js-cookie -S
使用
在需要的页面添加
import Cookie from "js-cookie";
添加
Cookie.set("数据的名称", 数据)
数据要是字符串的形式
获取
Cookie.get("数据的名称")
移除
Cookie.remove("数据的名称")
anywhere
vue-fragment
安装
npm i vue-fragment -S
使用
main.js
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
使用的地方 例如下面这样子的
<fragment>
<div>
...
</div>
</fragment>
vue-video-player
安装
npm i vue-video-player –S
npm i vue-video-player@5.0.2 -S
使用
main.js
import VuevideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
Vue.use(VuevideoPlayer);
使用处
<video-player> </video-player>
video.js
安装
npm i video.js -S
使用
使用的页面
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
components: {
videoPlayer
}
}
vue-dplayer
安装
npm i vue-dplayer -S
使用
main.js
import VueDPlayer from "vue-dplayer";
import "vue-dplayer/dist/vue-dplayer.css";
Vue.use(VueDPlayer);
使用处
<d-player></d-player>
markdown
安装
npm i mavon-editor -S
使用
main.js
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
使用处
<mavon-editor v-model="value"/>
个人
预览
<mavon-editor v-model="content" :subfield="false" :defaultOpen="'preview'" :toolbarsFlag="false"/>
<div v-html="content"/>
编辑
<mavon-editor v-model="content"/>
wangeditor
安装
npm i wangeditor -S
使用
使用页
import E from 'wangeditor'
// 关联div, new一个editor对象
const editor = new E('#div1')
editor.create()
获取
editor.txt.html()
vxe-table
安装
npm i xe-utils@2.8.1 vxe-table@2.9.26 -S
使用
main.js
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
Vue.prototype.$VXETable = VXETable
vue-codemirror-lite
安装
npm i vue-codemirror-lite -S
使用
使用处 导入需要的例如codemirror
import { codemirror } from 'vue-codemirror-lite'
export default {
components: {
codemirror
}
}
样式
import "codemirror/theme/monokai.css";
import "codemirror/theme/solarized.css";
import "codemirror/theme/material.css";
import "codemirror/theme/idea.css";
import "codemirror/theme/eclipse.css";
import "codemirror/theme/base16-dark.css";
import "codemirror/theme/cobalt.css";
import "codemirror/theme/dracula.css";
模式
import "codemirror/mode/clike/clike.js";
import "codemirror/mode/python/python.js";
import "codemirror/mode/pascal/pascal.js"; //pascal
import "codemirror/mode/go/go.js"; //go
import "codemirror/mode/d/d.js"; //d
import "codemirror/mode/haskell/haskell.js"; //haskell
import "codemirror/mode/mllike/mllike.js"; //OCaml
import "codemirror/mode/perl/perl.js"; //perl
import "codemirror/mode/php/php.js"; //php
import "codemirror/mode/ruby/ruby.js"; //ruby
import "codemirror/mode/rust/rust.js"; //rust
import "codemirror/mode/javascript/javascript.js"; //javascript
import "codemirror/mode/fortran/fortran.js"; //fortran
v-clipboard
安装
npm install --save v-clipboard
使用
main.js
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)
vue3
直接生成
npm init vue@latest
vite3 构建 vue3
npm init vite
project name: 你项目的名字
select a framework: 框架
select a variant: 选择的语言
安装router
npm i vue-router -S
/src/router/index.ts 下
import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
// RouteLocationRaw 内置的类型接口
const routes: Array<RouteRecordRaw> = [
{path: '/:catchAll(.*)', name: 'notFInd404', component: () => import('@/views/notFind404.vue'),},
]
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to, from, next) => {
// console.log('from:', from.path, '\t to:', to.path)
next()
})
export default router;
main.ts 中添加
import router from "./router";
app.use(router)
安装axios
npm i axios -S
/utils/request.ts
import axios, {AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse} from "axios";
import auth from '@/utils/auth'
import router from "@/router";
import {ElMessage} from "element-plus";
// AxiosRequestConfig 请求传递参数类型
const service: AxiosInstance = axios.create({
baseURL: '/api',
timeout: 5000,
});
// 请求拦截
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
service.interceptors.request.use((config: AxiosRequestConfig | any) => {
// const headerToken = auth.getToken();
// if (headerToken) {
// config.headers['Authorization'] = headerToken
// }
return config
}, (error: AxiosError) => {
return Promise.reject(error)
});
// 响应拦截器
// response 拦截器
// 可以在接口响应后统一处理结果
service.interceptors.response.use((response: AxiosResponse) => {
let res = response.data
if (res.status == undefined) {
return res
}
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
if (res.status != 200) {
ElMessage.error(res.message || 'Error')
return Promise.reject(new Error(res.message || 'Error'))
}
return response
}, error => {
if (error.response.status === 403) {
ElMessage.error('登录状态已过期请重新登录')
auth.removeToken()
router.push('/login')
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
}
return Promise.reject(error)
})
export default service;
安装store
npm i vuex -S
/store/index.ts
import {createStore} from 'vuex'
interface State {
count: number,
}
// 创建 store 实例
const store = createStore<State>({
// store 的初始状态
state() {
// 初始状态
return {
count: 0,
}
},
// 定义了同步方法，通过调用 commit 方法来触发
mutations: {
// 同步方法
increment(state: any) {
state.count++
},
decrement(state: any) {
state.count--
}
},
// 定义了异步方法，通过调用 dispatch 方法来触发
actions: {
// 异步方法
async incrementAsync(context: any) {
await new Promise(resolve => setTimeout(resolve, 1000))
context.commit('increment')
}
},
// 定义了计算属性，可以用于派生出其他状态
getters: {
// 计算属性
doubleCount(state: any) {
return state.count * 2
}
},
// 定义了模块，可以将 store 拆分成多个模块
modules: {
// 模块
}
})
export default store
main.ts中添加
import store from './store'
app.use(store)
安装element-plus
npm i element-plus -S
main.ts 中添加
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
app.use(ElementPlus, {locale: zhCn})
element-plus按需导入组件
- 需要使用额外的插件来导入要使用的组件
npm i unplugin-vue-components -S
vite.consfig.ts 中修改一下
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from "unplugin-vue-components/resolvers"
plugins: [
vue(),
// 按需导入element+的组件
Components({
resolvers: [ElementPlusResolver()],
}),
],
element-plus 的icon
npm i @element-plus/icons-vue -S
js-cookie
npm i --save-dev @types/js-cookie
/untils/auth.ts
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
function getToken() {
return Cookies.get(TokenKey)
}
function setToken(token: string) {
// 此时为7天后删除cookie，可以不设置，默认会话结束后自动删除cookie
return Cookies.set(TokenKey, token, {expires: 7})
}
function removeToken() {
return Cookies.remove(TokenKey)
}
export default {
getToken: getToken,
setToken: setToken,
removeToken: removeToken,
}
crypto-js 加密
npm i crypto-js -S
使用页导入
import CryptoJS from "crypto-js";
import CryptoJS from 'crypto-js'
// 对称加密算法AES
const key = 'my secret key';
const iv = 'my initialization vector';
/**
* 使用 AES 加密算法进行加密
*/
function encryptAES(data: string): string {
const keyUtf8 = CryptoJS.enc.Utf8.parse(key);
const ivUtf8 = CryptoJS.enc.Utf8.parse(iv);
const encrypted = CryptoJS.AES.encrypt(data, keyUtf8, {
iv: ivUtf8,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
return encrypted.toString();
}
/**
* 使用 AES 加密算法进行解密
*/
function decryptAES(data: string): string {
const keyUtf8 = CryptoJS.enc.Utf8.parse(key);
const ivUtf8 = CryptoJS.enc.Utf8.parse(iv);
const decrypted = CryptoJS.AES.decrypt(data, keyUtf8, {
iv: ivUtf8,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
export default {
encryptAES: encryptAES,
decryptAES: decryptAES,
}
vue-clipboard 剪切板
vue-clipboard2
npm i vue-clipboard2 -S
main.ts
import VueClipBoard from 'vue-clipboard2'
app.use(VueClipBoard)
vue-clipboard3
npm i vue-clipboard3 -S
需要的页面
import clipboard3 from “vue-clipboard3”;
处理跨域
vite.config.ts 中添加
server: {
host: true,
port: 80, // 设置vue启动的端口号
open: false, //自动打开浏览器
proxy: {
// 设置拦截器 拦截器格式:斜杠+拦截器名字(名字自己定)
'/api': {
target: 'http://localhost:8080', // 代理目标地址
changeOrigin: true, // 允许跨域
rewrite: (path) => path.replace(/^\/api/, ''), // 重写path路径
}
}
}
打包时处理掉项目中的调试信息
vite.config.ts 中添加
build: {
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
}
}
},
编写路劲时应用@
npm i path -S
tsconfig.json中添加
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
华为云组件
安装
npm install @opentiny/vue@3
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
define: {
'process.env': { ...process.env }
}
})
多组件引入按需加载和打包配置方法
npm install @opentiny/vue-vite-import
vite.config.ts
import vue from '@vitejs/plugin-vue'
import importPlugin from '@opentiny/vue-vite-import'
export default defineConfig({
resolve: {
extensions: ['.js', '.jsx', '.vue']
},
plugins: [
vue(),
importPlugin(
[
{
libraryName: '@opentiny/vue'
},
{
libraryName: `@opentiny/vue-icon`,
customName: (name) => {
return `@opentiny/vue-icon/lib/${name.replace(/^icon-/, '')}.js`
}
}
],
'pc' // 此配置非必选，按需配置(pc|mobile|mobile-first)
)
],
define: {
'process.env': { ...process.env }
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
