Vue3 プロジェクトの迅速な開発テンプレート
導入
このプロジェクトは vue3 + webpack の方法で開発されています 共通の機能が導入されています ルーティング、リクエスト、ピニアなどの設定は必要ありません 開始時に直接ページを開発できます箱
私のウェアハウスを直接プルして直接使用することも、この記事のチュートリアルに従って自分で操作することもできます
倉庫のアドレス: https://gitee.com/szxio/vue3-template。
役に立った場合は、いいね、ブックマーク、フォローしてください。❥(^_-)
テクノロジースタック
- ビュー3
- ウェブパック
- 豆
- vue-ルーター4
- エレメントプラス
- アクシオス
- i18n
- 生意気な
スタートアッププロジェクト
インストール
npm install
走る
npm run serve
パック
npm run build
ピニアの使用
インストール
最初に依存関係をインストールします。このプロジェクトはインストールされています。以下は単なるチュートリアルです
npm install pinia
構成
新しいsrc/store/index.js
、内容は次のとおりです
import {
createPinia} from 'pinia'
export default createPinia()
でmain.js
紹介されました
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import pinia from '@/store/index.js'
app.use(pinia)
app.mount('#app')
使用
新しいsrc/store/userInfo.js
、内容は次のとおりです
import {
defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const userInfo = defineStore('userInfo', {
state: () => ({
userInfo: {
name: 'lisi',
age: 18,
},
}),
actions: {
async setUserInfo(data) {
this.userInfo = data
},
},
})
ページ内で使用する
<template>
<div>
{
{ store.userInfo.name }}
<button @click="getClick">修改store</button>
</div>
</template>
import { userInfo } from '@/store/userInfo'
const store = userInfo()
const getClick = () => {
store.setUserInfo({
name: 'wangwu',
})
}
国際化構成
インストール
npm install vue-i18n
構成
新しいsrc/i18n/index.js
、内容は次のとおりです
import {
createI18n } from 'vue-i18n'
import homeEn from './home/en.js'
import homeZh from './home/zh.js'
const messages = {
en: {
home: {
...homeEn },
},
zh: {
home: {
...homeZh },
},
}
const language = (navigator.language || 'zh').toLocaleLowerCase() // 这是获取浏览器的语言
const i18n = createI18n({
legacy: false,
locale: localStorage.getItem('i18n') || language.split('-')[0] || 'zh', // 首先从缓存里拿,没有的话就用浏览器语言,
fallbackLocale: 'zh', // 设置备用语言
messages,
})
export default i18n
上記で紹介した中国語と英語の資料は以下の通りです。
src/i18n/home/en.js
export default {
login: 'Log in',
userName: 'Username',
password: 'Password',
}
src/i18n/home/zh.js
export default {
login: '登录',
userName: '用户名',
password: '密码',
}
ファイルmain.js
内で紹介
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import i18n from '@/i18n/index.js'
app.use(i18n)
app.mount('#app')
使用
$t
jsで別途導入する必要はなく、グローバルに導入されているので、こちらのページで直接利用できます
<template>
<div>
{
{ $t('home.userName') }}
<el-button type="primary" @click="switchLanguage">切换语言</el-button>
</div>
</template>
<script setup>
const switchLanguage = () => {
localStorage.setItem('i18n', 'en')
window.location.reload()
}
</script>
Sassのインストール
インストール
上位バージョンをここにインストールすることはできません。インストールしないと、互換性の問題が発生してプロジェクトの開始に失敗します。
npm install sass [email protected] [email protected]
構成
新しいビルドsrc/assets/style/index.scss
:root {
--primary-color: #1c82e3;
}
body {
margin: 0;
min-height: 100vh;
}
でmain.js
紹介されました
import {
createApp } from 'vue'
import App from './App.vue'
import '@/assets/style/index.scss'
const app = createApp(App)
app.mount('#app')
使用
<style scoped lang="scss">
h1{
color: var(--primary-color)
}
</style>
VueRouter4 が使用するもの
インストール
npm install vue-router@4
構成
// 1.从vue-router导出两个方法使用
import {
createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/layout/index.vue'
// 2.声明菜单数组
const routes = [
{
path: '/',
component: Layout,
redirect: '/home',
title: '首页',
children: [
{
path: 'home',
title: '首页',
component: import('../view/home/index.vue'),
},
{
path: 'about',
title: '关于我',
component: import('../view/about/index.vue'),
},
],
},
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
// 导出路由
export default router
新しいsrc/layout/index.vue
ファイル
<template>
<div>
<div
class="d-flex flex-justify-center gap-10 bg-yellow-light flex-items-center navtop"
style="height: 50px"
>
<div
:class="{
active: route.path === '/home' || route.path === '/',
}"
@click="goPage1"
>
首页
</div>
<div
:class="{
active: route.path === '/about',
}"
@click="goPage2"
>
我的
</div>
</div>
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, watchEffect } from 'vue'
const route = ref(useRoute())
const router = ref(useRouter())
const goPage1 = () => {
router.value.push({
path: '/home',
})
}
const goPage2 = () => {
router.value.push({
path: '/about',
})
}
// 监听路由
watchEffect(() => {
console.log(route.value.path, '5555')
})
</script>
<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.navtop {
div {
display: flex;
align-items: center;
background-color: #1ab394;
color: white;
height: 100%;
line-height: 100%;
padding: 0 20px;
}
}
.active {
background-color: #1c82e3 !important;
}
</style>
でmain.js
紹介されました
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import router from '@/router/index.js'
app.use(router)
app.mount('#app')
使用
import {
useRoute, useRouter } from 'vue-router'
const router = ref(useRouter())
const route = ref(useRoute())
// 获取路由信息
const getRouteInfo = () => {
console.log(route.value.path)
console.log(route.value.query)
console.log(route.value.meta)
}
// 路由跳转并传参
const goAbout = () => {
router.value.push({
path: '/about',
query: {
id: '1',
},
})
}
エレメントプラスの使用
インストール
npm install element-plus @element-plus/icons-vue
構成
import {
createApp } from 'vue'
import App from './App.vue'
import '@/assets/style/index.scss'
const app = createApp(App)
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import lang from 'element-plus/lib/locale/lang/zh-cn'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus, {
locale: lang,
})
app.mount('#app')
使用
<el-button type="primary" @click="showMsg">成功消息</el-button>
import {ElMessage} from "element-plus";
const showMsg = () => {
ElMessage.success("success")
}
Axios の用途
インストール
npm install axios
構成
新しいsrc/utils/request.js
:
import axios from 'axios'
import {
ElMessage } from 'element-plus'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
})
// request拦截器
service.interceptors.request.use(
(config) => {
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
(res) => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200
// 获取错误信息
const msg = res.data.msg
if (code !== 200 && code !== 20000 && code !== 1) {
ElMessage.error(msg)
return Promise.reject('error')
} else {
return res.data
}
},
(error) => {
console.log('err' + error)
let {
message } = error
if (message === 'Network Error') {
message = '后端接口连接异常'
} else if (message.includes('Request failed with status code')) {
message = '系统接口' + message.substr(message.length - 3) + '异常'
}
ElMessage({
message: message,
type: 'error',
duration: 5 * 1000,
})
return Promise.reject(error)
}
)
export default service
プロキシの設定、変更vue.config.js
const port = process.env.port || 10078 // 端口
module.exports = {
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://xxx.xxx.xxx`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '',
},
},
},
disableHostCheck: true,
},
}
使用
import request from '@/utils/request'
export function testRequestFun() {
return request({
url: `/homePage/getProcessNode`,
method: 'get',
})
}
@access エイリアスを構成する
改訂vue.config.js
const path = require('path')
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src/'),
},
},
},
}