VUE3实战一之项目搭建

1. 项目初始化

1.1. 环境要求

node -v      
v16.17.0
npm -v
8.15.0
1
2
3
4

1.2. 创建VUE项目-基于vite

npm init vue@latest
1

需要在初始化按照的模块可以按需按照，本次demo只取最简项目

1.3. 项目初始化

cd michael-demo
npm install # install needed modules
npm run dev
1
2
3

页面效果

项目目录

2. 项目配置

2.1. 基本配置修改

icon

Title

配置jsconfig.json

{
  "compilerOptions": {
    // "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "vueCompilerOptions": {
    "experimentalDisableTemplateSupport": true
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.2. 项目目录结构划分

删除自带的项目

按照常用的目录划分

还有个router存放路由相关的代码

2.3. css样式重置

npm install normaliza
1

reset.css

body, h1, h2, h3, h4, ul, li {
    padding: 0;
    margin: 0;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

img {
    vertical-align: top;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

common.css

:root {
    --primary-color: #ff9854;
  
    /* 全局修改: 任何地方只要用到-van-tabbar-item-icon-size都会被修改掉 */
    /* --van-tabbar-item-icon-size: 30px !important; */
  }
  
  body {
    font-size: 14px;
  }
1
2
3
4
5
6
7
8
9
10

index.css

@import "./common.css";
@import "./reset.css";
1
2

3. 路由配置

3.1. router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  // 映射关系: path -> component
  routes: [
    {
      path: "/",
      redirect: "/home"
    },
    {
      path: "/home",
      component: () => import("@/views/home/home.vue")
    },
    {
      path: "/favor",
      component: () => import("@/views/favor/favor.vue")
    },
    {
      path: "/order",
      component: () => import("@/views/order/order.vue")
    },
    {
      path: "/message",
      component: () => import("@/views/message/message.vue")
    }
  ]
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

3.2. 路由的view页面开发

<template>
  <div class="favor">
    <h2>favor</h2>
  </div>
</template>

<script setup>

</script>

<style lang="less" scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.3. main.js中只用路由

3.4. 视图中使用路由占位

3.5. 路由跳转

<script setup>

</script>

<template>
  <div>
    <h2>vue</h2>
    <router-view/>
  </div>
  <div class="app">
    <div class="router-link">
      <router-link to="/home">Home</router-link>
    </div>
    <div class="router-link">
      <router-link to="/favor">Favor</router-link>
    </div>
    <div class="router-link">
      <router-link to="/order">Order</router-link>
    </div>
    <div class="router-link">
      <router-link to="/message">Message</router-link>
    </div>
  </div>
</template>

<style lang="less" scoped>
.app {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;

  border-top: 1px solid #f3f3f3;

  .router-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

}  
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46