Vue3 프로젝트 구축 과정을 기록하세요. 이 기사는 vue3.2.6 및 vite2.51 버전을 기반으로 하며 UI 라이브러리 Element plus, vue-router4, 레이아웃 레이아웃 캡슐화, axios 요청 캡슐화, 별칭 구성 등을 사용합니다.
vue3 온라인 코드 도구 포털 sfc.vuejs.org/
npm init vite vite를 초기화하려면 다음을 입력할 수 있습니다. 이 과정에서 프로젝트 이름을 선택하고 vue/react 프로젝트와 js/ts 환경을 선택합니다. vue3은 ts를 완벽하게 지원하며 이 기사에서는 js를 사용합니다. npm install은 종속성을 설치합니다. 마지막으로 npm run dev를 실행하여 프로젝트를 실행합니다. npm init vite 初始化vite此过程可以输入项目名、选择vue/react项目及js/ts环境选择，vue3已经完全支持ts，此文章使用的是js。npm install 安装依赖。最后执行npm run dev运行项目。
运行过程时如果出现上图的报错信息，可以手动执行 node node_modules/esbuild/install.js，然后再执行npm run dev
执行 npm install vue-router@4 , vue3对应的vue-router和vuex的版本都是 4.0。执行命令安装完成之后,在目录下创建 src/router/index.js 写入下面的配置：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
// ...
]
export default createRouter({
history: createWebHistory(),
routes,
})main.js中使用
// ...+ import router from './router/index' createApp(App).use(router).mount('#app')
vue-router4写法和以前的有些区别 hash模式 createWebHashHistory history模式 createWebHistory，具体可查看官网。
执行命令npm i sass -D，然后在目录下创建 src/styles/index.scss：
// @import './a.scss'; // 作为出口组织这些样式文件，同时编写一些全局样式
在 mian.js 中引入
import '@/styles/index.scss'
tips: vue3中样式穿透 使用::deep(.className) 或者 deep(.className)
执行npm i element3 -S命令安装，如果你能用到里面的大多数组件，就用全局引入方式，如下：
// main.js import element3 from "element3"; import "element3/lib/theme-chalk/index.css"; createApp(App).use(router).use(element3).mount('#app')
如果你只用到几个组件，就可以按需加载优化性能，创建src/plugins/element3.js，如下
// 按需引入 plugins/element3.js
import { ElButton, ElMenu, ElMenuItem } from 'element3'
import 'element3/lib/theme-chalk/button.css'
import 'element3/lib/theme-chalk/menu.css'
import 'element3/lib/theme-chalk/menu-item.css'
export default function (app) {
app.use(ElButton)
app.use(ElMenu)
app.use(ElMenuItem)
}
// main.js中引用
import element3 from '@/plugins/element3.js'
createApp(App).use(router).use(element3).mount('#app')// src/layout/index.vue <template> <!-- 顶部导航 --> <Navbar /> <!-- 页面内容部分、路由出口 --> <AppMain /> <!-- 底部内容 --> <Footer /> </template> <script setup> import Navbar from './Navbar.vue' import AppMain from './AppMain.vue' import Footer from './Footer.vue' </script>
根据自己的需求设计布局，使用Layout布局时，需要注意将Layout.vue作为父路由，路由设计大概像下面这样：
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/layout/index.vue'
import Home from '@/views/home/Home.vue'
import Test from '@/views/test/Test.vue'
const routes = [
{
path: '/',
component: Layout,
children: [{ path: '', component: Home }],
},
{
path: '/test',
component: Layout,
children: [{ path: '', component: Test }],
},
]
export default createRouter({
history: createWebHistory(),
routes,
})执行命令 npm i axios 安装axios
新建 src/utils/request.js，在此文件中进行封装axios
import axios from 'axios'
// 可以导入element plus 的弹出框代替alert进行交互操作
// create an axios instance
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASEURL, // 使用设置好的全局环境
timeout: 30 * 1000, // request timeout
})
// request interceptor
service.interceptors.request.use(
(config) => {
// 此处可以执行处理添加token等逻辑
// config.headers["Authorization"] = getToken();
return config
},
(error) => {
console.log(error)
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
(response) => {
const res = response.data // 根据接口返回参数自行处理
if (res.code !== 200) {
if (res.code === 50000) {
// 根据状态码自行处理
alert('服务器内部出现异常，请稍后再试')
}
return Promise.reject(new Error(res.msg || 'Error'))
} else {
// 调用成功返回数据
return Promise.resolve(res)
}
},
(error) => {
console.log('err' + error) // 出现异常的处理
return Promise.reject(error)
}
)
export default service为了方便管理和维护API，你可以在 src/api 目录下为每个模块或每个页面单独创建一个JS文件。在这里提供示例，创建一个名为 src/api/home.js 的文件，并将代码写入其中
// 引入封装好的 request.js
import request from '@/utils/request'
export function getList(query) {
return request({
url: '/list',
method: 'get',
params: query,
})
}在 home.vue 中使用
<script setup>
import { getList } from '@/api/home.js'
const query = { pagenum: 1 }
getList(query)
.then((res) => {
console.log(res) // 调用成功返回的数据
})
.error((err) => {
console.log(err) // 调用失败要执行的逻辑
})
</script>项目根目录下创建三个文件.env.production 生产环境 .env.development 开发环境 .env.staging 测试环境 ，分别加入下面的代码，在不同的编译环境下，打包时自动执行当前环境下的代码
# .env.production VITE_APP_BASEURL=https://www.prod.api/
# .env.development VITE_APP_BASEURL=https://www.test.api/
# .env.staging VITE_APP_BASEURL=https://www.test.api/
使用：
console.log(import.meta.env.VITE_APP_BASEURL) // 在不同编译环境下控制台会输出不同的url路径
在package.json中通过传递 --mode 选项标志来覆盖命令使用的默认模式
"scripts": {
"dev": "vite",
"build:stage": "vite build --mode staging",
"build:prod": "vite build --mode production",
"serve": "vite preview"
},这样，生产环境打包执行npm run build:prod，测试/预发布环境打包npm run build:stage
node node_modules/esbuild/install.js를 실행한 후 npm run dev3를 실행하면 됩니다.
vue-router를 설치하려면🎜 🎜npm install vue-router@4를 실행하세요. vue3에 해당하는 vue-router 및 vuex 버전은 모두 4.0입니다. 설치 명령어를 실행한 후 해당 디렉터리에 src/router/index.js를 생성하고 다음과 같은 구성을 작성합니다. 🎜import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
},
base: './',
})🎜main.js는 🎜rrreee🎜vue-router4를 사용합니다. 작성 방법이 이전 해시 모드와 다소 다릅니다. code>createWebHashHistory 기록 모드 createWebHistory, 자세한 내용은 공식 웹사이트를 확인하세요. 🎜🎜🎜4.🎜 전역 스타일 및 sass 설치(@ path를 사용하려면 별칭을 구성해야 하며 해당 지침은 나중에 나와 있음) 🎜🎜 npm i sass -D 명령을 실행한 후 src/를 생성합니다. styles/index.scss 디렉토리에: 🎜rrreee🎜main.js에 도입됨🎜rrreee🎜🎜tips:🎜 vue3🎜🎜🎜5.🎜에서 스타일 침투를 위해::deep(.className) 또는 deep(.className)을 사용하세요. 요소 plus press import 및 global import가 필요합니다🎜🎜 npm i element3 -S 명령을 실행하여 설치하세요. 내부 구성 요소를 대부분 사용할 수 있다면 다음과 같이 전역 가져오기 방법을 사용하세요.🎜rrreee 🎜만 사용하는 경우 성능 최적화를 위해 필요에 따라 여러 구성요소를 로드할 수 있습니다. 다음과 같이 src/plugins/element3.js를 생성합니다🎜rrreee🎜🎜6.🎜 레이아웃 레이아웃, src/layout/index.vue🎜rrreee 파일을 생성합니다. 🎜자신의 필요에 따라 레이아웃을 디자인합니다. 레이아웃 레이아웃을 사용할 때 경로 디자인은 대략 다음과 같습니다. 🎜rrreee🎜🎜7.🎜 axios 요청 캡슐화🎜🎜 npm i axios 명령을 실행하여 axios를 설치하세요🎜 🎜새 src/utils/request.js를 만들고 이 파일에 axios를 캡슐화하세요🎜rrreee🎜API의 관리 및 유지 관리를 용이하게 하기 위해 다음을 만들 수 있습니다. src/api 디렉토리의 각 모듈 또는 페이지에 대한 별도의 JS 파일. 여기에 예제를 제공하고 src/api/home.js라는 파일을 생성하고 코드를 작성합니다. 🎜rrreee🎜 home.vue에서 사용합니다. 🎜rrreee🎜🎜8.🎜 프로젝트 루트 디렉토리 아래에 관련된 환경 변수🎜🎜 3개를 만듭니다. 파일 .env.production 프로덕션 환경 .env.development 개발 환경 .env.staging 테스트 환경에 다음 코드를 각각 추가합니다. 다른 컴파일에서 환경에서 패키징할 때 현재 환경에서 자동으로 코드를 실행합니다. 🎜rrreeerrreeerrreee🎜사용: 🎜rrreee🎜 package.json에서 --mode 옵션 플래그를 전달하여 기본 모드를 재정의하려면 🎜rrreee🎜 명령어로 사용하는 방식으로 프로덕션 환경은 npm run build:prod로 패키징하여 실행하고, 테스트/출시 전 환경은 npm run build:stage🎜🎜🎜 9.🎜 vite의 별칭 구성🎜🎜루트 디렉터리의 vite.config.js 파일에 코드 추가🎜rrreee위 내용은 vue3 프로젝트를 처음부터 빌드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!