Home > Article > Web Front-end > How to build a vue3 project from scratch
Record the Vue3 project building process. The article is based on vue3.2.6 and vite2.51 versions, and uses the UI library Element plus, vue-router4, Layout layout encapsulation, axios request encapsulation, alias configuration, etc.
vue3 online code tool portal sfc.vuejs.org/
npm init vite
In this process of initializing vite, you can enter the project name, select the vue/react project and select the js/ts environment. Vue3 fully supports ts. This article uses js. npm install
Install dependencies. Finally execute npm run dev
to run the project.
If the error message above appears when running the process, you can manually execute node node_modules/esbuild/install.js
, and then execute npm run dev
Executionnpm install vue-router@4
, vue- corresponding to vue3 The versions of router and vuex are both 4.0. After executing the command to install, create src/router/index.js in the directory and write the following configuration:
import { createRouter, createWebHistory } from 'vue-router' const routes = [ // ... ] export default createRouter({ history: createWebHistory(), routes, })
main.js uses
// ...+ import router from './router/index' createApp(App).use(router).mount('#app')
vue-router4. The writing method is somewhat different from the previous one. Difference hash mode createWebHashHistory
history modecreateWebHistory
, please check the official website for details.
Execute the commandnpm i sass -D
, and then create src/styles/index.scss in the directory:
// @import './a.scss'; // 作为出口组织这些样式文件,同时编写一些全局样式
Introduce
import '@/styles/index.scss'
tips in mian.js: Use style penetration in vue3 ::deep(.className) or deep(.className)
Executionnpm i element3 -S
Command installation, if you can use most of the components inside, use the global import method, as follows:
// main.js import element3 from "element3"; import "element3/lib/theme-chalk/index.css"; createApp(App).use(router).use(element3).mount('#app')
If you only use a few components, you can load them on demand to optimize performance and create src/plugins/element3.js, as follows
// 按需引入 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>
Design the layout according to your own needs, When using Layout, you need to pay attention to using Layout.vue as the parent route. The routing design is roughly as follows:
// 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, })
Execute commandnpm i axios
Install axios
Create a new src/utils/request.js and encapsulate axios in this file
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
In order to facilitate the management and maintenance of the API, you can create it in src/ Create a separate JS file for each module or page in the api directory. To provide an example here, create a file called src/api/home.js and write the code into it
// 引入封装好的 request.js import request from '@/utils/request' export function getList(query) { return request({ url: '/list', method: 'get', params: query, }) }
Use
<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>
Create three files in the project root directory.env.production
Production environment.env.development
Development environment.env. staging
Test environment, add the following code respectively, in different compilation environments, automatically execute the code in the current environment when packaging
# .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/
Use:
console.log(import.meta.env.VITE_APP_BASEURL) // 在不同编译环境下控制台会输出不同的url路径
In package In .json
, pass the --mode
option flag to override the default mode used by the command
"scripts": { "dev": "vite", "build:stage": "vite build --mode staging", "build:prod": "vite build --mode production", "serve": "vite preview" },
In this way, the production environment is packaged and executed npm run build:prod
, Test/pre-release environment packagingnpm run build:stage
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: './', })
The above is the detailed content of How to build a vue3 project from scratch. For more information, please follow other related articles on the PHP Chinese website!