Home > Web Front-end > Vue.js > How to build a vue3 project from scratch

How to build a vue3 project from scratch

王林
Release: 2023-06-02 17:34:50
forward
4030 people have browsed it

    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.

    How to build a vue3 project from scratch

    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,
    })
    Copy after login

    main.js uses

    // ...+
    import router from './router/index'
    createApp(App).use(router).mount('#app')
    Copy after login

    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'; 
    // 作为出口组织这些样式文件,同时编写一些全局样式
    Copy after login

    Introduce

    import '@/styles/index.scss'
    Copy after login

    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')
    Copy after login

    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')
    Copy after login

    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>
    Copy after login

    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 &#39;vue-router&#39;
    import Layout from &#39;@/layout/index.vue&#39;
    import Home from &#39;@/views/home/Home.vue&#39;
    import Test from &#39;@/views/test/Test.vue&#39;
    const routes = [
      {
        path: &#39;/&#39;,
        component: Layout,
        children: [{ path: &#39;&#39;, component: Home }],
      },
      {
        path: &#39;/test&#39;,
        component: Layout,
        children: [{ path: &#39;&#39;, component: Test }],
      },
    ]
    
    export default createRouter({
      history: createWebHistory(),
      routes,
    })
    Copy after login

    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 &#39;axios&#39;
    // 可以导入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(&#39;服务器内部出现异常,请稍后再试&#39;)
          }
          return Promise.reject(new Error(res.msg || &#39;Error&#39;))
        } else {
          // 调用成功返回数据
          return Promise.resolve(res)
        }
      },
      (error) => {
        console.log(&#39;err&#39; + error) // 出现异常的处理
        return Promise.reject(error)
      }
    )
    
    export default service
    Copy after login

    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 &#39;@/utils/request&#39;
    
    export function getList(query) {
      return request({
        url: &#39;/list&#39;,
        method: &#39;get&#39;,
        params: query,
      })
    }
    Copy after login

    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>
    Copy after login

    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/
    Copy after login
    # .env.development
    VITE_APP_BASEURL=https://www.test.api/
    Copy after login
    # .env.staging
    VITE_APP_BASEURL=https://www.test.api/
    Copy after login

    Use:

    console.log(import.meta.env.VITE_APP_BASEURL)
    // 在不同编译环境下控制台会输出不同的url路径
    Copy after login

    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"
      },
    Copy after login

    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 &#39;vite&#39;
    import vue from &#39;@vitejs/plugin-vue&#39;
    import { resolve } from &#39;path&#39;
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [vue()],
      resolve: {
        alias: [{ find: &#39;@&#39;, replacement: resolve(__dirname, &#39;src&#39;) }],
      },
      base: &#39;./&#39;,
    })
    Copy after login

    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!

    Related labels:
    source:yisu.com
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template