vue3+element plus
一、初始化安装
1、安装vue/cli
# 先安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli
# 版本验证
vue -V 或 vue --version // 使用vue3时，@vue/cli版本必须高于4.5.0
# 安装yarn
cnpm install -g yarn
2、创建项目并运行
-------- webpack方式创建项目 -------- vue create xxx #自定义选项 (*) Choose Vue version (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex ( ) CSS Pre-processors ( ) Linter / Formatter ( ) Unit Testing ( ) E2E Testing #运行 npm run serve -------- vite 方式创建项目 --------
// 环境要求：npm 7+，升级：cnpm install -g npm npm create vite@latest vue-vite1 // 选择：1.vue 2.vue-ts
cd 进入目录 cnpm install #运行 npm run dev
二、引入插件或工具
参考引用：https://blog.csdn.net/weixin_44066182/article/details/117078349
1、引入router
cnpm install vue-router@next
创建router文件
// router.ts文件
import { createRouter,createWebHistory} from "vue-router"
const routes = [
{
path:'/',
redirect: 'login'
},
{
path:'/login',
component: () => import('@/pages/login/login.vue')
},
{
path:'/home',
component: () => import('@/pages/home/home.vue')
}
]
// 导出路由
const router = createRouter({
history: createWebHistory(), //开启history模式
routes
});
export default router;
2、引入Vuex
cnpm install vuex@next --save
// store.ts文件
import { createStore } from 'vuex'
const store = createStore({
state () {
return {
count: 0
}
},
getters:{
getCount(state){
return state.count
}
},
mutations: {
increment (state) {
state.count++
}
}
})
export default store
3、引入axios
cnpm install axios
cnpm install qs
// axios.ts文件
import axios from 'axios' let baseURL // 判断开发环境（一般用于本地代理） if (process.env.NODE_ENV === 'development') { // 开发环境 baseURL = '/api' } else { // 编译环境 if (process.env.type === 'test') { // 测试环境 baseURL = 'http://192.168.1.165' } else { // 正式环境 baseURL = 'http://172.16.94.3' } } // 创建实例 const _axios = axios.create({ baseURL: baseURL, timeout: 60000, }) //请求拦截器 _axios.interceptors.request.use((config) => { //在发送请求之前的业务逻辑 console.log("开始请求...") return config }, (error) => { //请求发生错误的业务逻辑 console.log("请求发生错误") return Promise.reject(error) }) //响应拦截器 _axios.interceptors.response.use((response) => { //对响应数据的处理 console.log("响应成功") console.info("response.status：" + response.status); if (response.status != 200) { return Promise.reject(response) } else { return Promise.resolve(response); } }, (error) => { console.log("响应出现错误") if (error.response.status) { //响应错误 let status = error.response.status //根据不同的状态码，提示不同的信息 switch (status) { case 404: console.log("你访问的网页不存在") break case 401: console.log("身份验证失败") break case 403: console.log("登录过期") break default: console.log(error.response.data.msg) //其他的错误，抛出错误提示 } return Promise.reject(error) } }) export default _axios
// api.ts文件
import _axios from "@/request/axios" // import qs from 'qs' 把参数序列化成URL的形式，以&进行拼接，qs.stringify(data) const api = { saveArticle(data: any) { /** * Get请求 * 后台java代码，GetMapping，参数不加注解，json参数用param封装 * * @GetMapping("/articleInfo/create") * public CommonResult create(ArticleInfo articleInfo){ * */ return _axios.get('/snow/articleInfo/create', {params:data}) /** * Post请求 * 后台java代码，PostMapping，参数加注解@RequestBody，json参数直接传递 * * @PostMapping("/articleInfo/create") * public CommonResult create(@RequestBody ArticleInfo articleInfo){ * */ // return _axios.post('/snow/articleInfo/create', data) } } export default api;
4、引入elment plus
cnpm install element-plus --save
// 在main.js中引用，参照后面main.js完整代码
5、引入scss
cnpm install sass
// 在login.vue中使用，参照后面login.vue完整代码
6、引入echart
cnpm install echarts --save
// 在main.js中引用，参照后面main.js完整代码
7、引入openlayer
cnpm install ol --save // 在main.js中引用，参照后面main.js完整代码
三、全局配置
1、main.ts文件
import { createApp } from 'vue'
import App from '@/App.vue'
import route from '@/route/router'
import store from '@/store/store'
import api from '@/request/api'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import global from '@/components/global.vue'
const app = createApp(App)
app.use(route)
app.use(store)
app.use(ElementPlus)
//挂载全局属性，或者方法，类似于 Vue.prototype.$api = api
app.config.globalProperties.$api = api
//注册全局组件
app.component("myGlobal",global)
app.mount('#app')
2、vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
// https://www.vitejs.net/config
export default defineConfig({
plugins: [vue()],
resolve: {
//配置根路径别名
alias: {
"@": path.resolve(__dirname, "src")
},
},
server: {
port: 7777,
open: true,
https: false,
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
})
3、tsconfig.json
{ "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "lib": [ "esnext", "dom" ], "skipLibCheck": true, "baseUrl": ".", "paths": { "@/*": [ "src/*" ] }, "allowJs": true, "allowSyntheticDefaultImports": true, "forceConsistentCasingInFileNames": true, "experimentalDecorators": true, "noEmit": true }, "include": [ "**/*.ts", "**/*.d.ts", "**/*.tsx", "**/*.vue" ], "exclude": [ "node_modules" ] }
四、页面或组件代码
1、App.vue
<template> <div id="app"> <router-view /> </div> </template> <style> #app { width: 100%; height: 100%; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; } </style>
2、login.vue
<template> <h1>登录</h1> <button @click="login">点击登录</button> <router-link to="/home">跳转</router-link> <h3>{{ count }}</h3> <button @click="click">添加</button> <br /> <br /> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> </template> <script> export default { data() { return { count: this.$store.state.count, }; }, mounted() { // console.log(this.$axios) }, methods: { click() { this.$store.commit("increment"); this.count = this.$store.state.count; }, login() { this.$api.addInfo({ title: "001", article: "test" }); }, }, }; </script> <style lang="scss" scoped> @mixin styleFun() { color: red; border: 1px solid red; background: green; } h1 { @include styleFun(); } </style>
五、常见错误
1、ts语法检查错误处理
// 添加插件 cnpm install @types/node --save-dev
cnpm install @types/qs --save-dev
六、启动
npm run dev
七、VScode 环境优化
1、插件安装
vscode-icons // 文件图标美化
Vetur // 语法高亮、智能感知、格式化（Alt+Shift+F）
EsLint // 语法纠错
JavaScript(ES6) code snippets // ES6语法智能提示以及快速输入
HTML CSS Support // 自动补全html、css代码
GitLens -- Git Supercharged // 查看git文件提交历史
2、format设置vue2（vetur）
### settings.json // 打开方式：ctrl+shift+p,搜索settings.json { // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F "editor.formatOnSave": false, //设置tab的缩进为2 "editor.tabSize": 2, // #每次保存的时候将代码按eslint格式进行修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, // 添加 vue 支持 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], // #去掉代码结尾的分号 "prettier.semi": false, // #使用带引号替代双引号 "prettier.singleQuote": true, "prettier.tabWidth": 4, // #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html", // #让vue中的js按"prettier"格式进行格式化 "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // #vue组件中html代码格式化样式 "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样 "wrap_line_length": 200, "end_with_newline": false, "semi": false, "singleQuote": true }, "prettier": { "semi": false, "singleQuote": true } }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // 格式化stylus, 需安装Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒号 "stylusSupremacy.insertSemicolons": false, // 是否插入分号 "stylusSupremacy.insertBraces": false, // 是否插入大括号 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行 "stylusSupremacy.insertNewLineAroundBlocks": false, "prettier.useTabs": true, "files.autoSave": "off", "explorer.confirmDelete": false, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "diffEditor.ignoreTrimWhitespace": false, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } // 两个选择器中是否换行 }
.prettierrc 文件 // Prettier 格式化插件 设置文件
{ "$schema": "https://json.schemastore.org/prettierrc", "semi": false, "trailingComma": "none", "tabWidth": 2, "singleQuote": true, "bracketSameLine": true, "printWidth": 120, "singleAttributePerLine": true }
2、format设置vue3（另需设置..prettierrc）
{ "editor.detectIndentation": false, // 是否自动设置tabsize的选项，设置为false时tabSize才生效 "editor.tabSize": 2, // 重新设定tabsize "editor.fontSize": 12, // 字体大小 "editor.formatOnSave": true, // 保存时自动格式化 // 设置每一种语言默认的格式化规则 "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, // VScode进行文件搜索时，不搜索这些区域。 "search.exclude": { "**/node_modules": true, "**/.DS_Store": true, "**/.gitignore": true, "**/.idea": true, "**/.vscode": true, "**/dist": true, "**/assets": true }, // VScode不展示这些类型的文件。 "files.exclude": { "**/.DS_Store": true, "**/.vscode": true, "**/node_modules": true, "**/.gitignore": true }, "git.autofetch": true // 在push代码时，是否先自动从远端拉取代码 }
八、添加git管理
1、git管理
git init git add . git commit -m "first commit" git remote add origin https://xxxx/xxx/xxx.git git push -u origin master
九、常用代码
十、tomcat独立部署
1、路由 选择hash模式（解决刷新报404的问题）
//router.ts const router = createRouter({ // history: createWebHistory(), //history 路由模式 history: createWebHashHistory(), //hash 路由模式 routes });
2、配置文件路径（解决不能带/dist文件夹直接放到webapps目录下的问题）
// vite.config.ts export default defineConfig({ plugins: [vue()], base: 'dist', // 添加路径
