How to build a vue3 project from scratch

Instructions

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.

Start

1. Use the vscode development tool to install the vue3 plug-in Volar. In vue2 we use Vetur.

• vue3 online code tool portal sfc.vuejs.org/

2. Execute initialization and installation commands:

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

3. Install vue-router

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.

4. Global styles and sass installation (using @ path requires configuring an alias, and there are corresponding instructions later)

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)

5. Element plus on-demand introduction and global introduction

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')

6. Layout layout, create the file src/layout/index.vue

// src/layout/index.vue
<template>
   <!-- 顶部导航 -->
  <Navbar />
  <!-- 页面内容部分、路由出口 -->
  <AppMain />
  <!-- 底部内容 -->
  <Footer />
</template>

<script setup>
import Navbar from &#39;./Navbar.vue&#39;
import AppMain from &#39;./AppMain.vue&#39;
import Footer from &#39;./Footer.vue&#39;
</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,
})

7. axios request encapsulation

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 &#39;@/api/home.js&#39;
const query = { pagenum: 1 }
getList(query)
  .then((res) => {
    console.log(res) // 调用成功返回的数据
  })
  .error((err) => {
    console.log(err) // 调用失败要执行的逻辑
  })
</script>

8 in home.vue. Environment variable related

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

##9. Alias ​​configuration in vite

vite.config.js in the root directory File add code

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!