vue3-项目快速搭建和初始化

环境安装

npm安装

Node.js各版本：Previous Releases | Node.js (nodejs.org)

Linux

1. 从官网下载最新版，文件名中是带了linux字样的，如node-v16.20.0-linux-x64.tar.xz

2. 解压：如果是tar.xz文件，则先用xz -d node-xxxxx.tar.xz现将tar.xz解压为tar包，然后再tar -xvf node-xxx.tar解压；如果是tar.gz文件，则直接tar -zxvf node-xxx.tar.gz解压

3. 将解压目录移动到/usr/local/：mv node-v16.20.0-linux-x64 /usr/local/node

4. 创建软链接：ln -s /usr/local/node/bin/node /usr/bin/node

5. 创建软链接：ln -s /usr/local/node/bin/npm /usr/bin/npm

6. 查看命令的版本：npm -v；node -v

Windows

下载node-vxx.x.x-x64.msi，双击安装即可

常用配置

设置源

npm config set registry xxxxx   
# npm config set registry=http://registry.npm.taobao.org
1
2

设置默认目录

# Linux
npm config set prefix "/usr/local/node/global"
npm config set cache "/usr/local/node/cache"

# Windows
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
1
2
3
4
5
6
7

安装前端构建工具

vue-cli和vite二选一即可。

vue-cli脚手架

npm install -g @vue/cli
1

vite

npm install -g vue@latest 
npm install -g webpack 
npm install -g webpack-cli 
npm install -g vite 
1
2
3
4

安装基本模块

npm install -g element-plus
npm install -g axios
npm install -g vue-router
npm install -g vuex
1
2
3
4

创建和启动项目

vue-cli

vue create 项目名称
1

cd 项目名称
npm install              # 安装模块
npm run serve            # 启动运行
1
2
3

vite

npm init vite-app 项目名称
1

cd 项目名称
npm install
npm run dev
1
2
3

具体命令，详见package.json配置文件

基本代码框架

引用elementPlus

main.js

import App from './App.vue'
import { createApp } from 'vue'
import router from './router'
// 导入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// icon使用
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 使用element-plus
app.use(ElementPlus)
app.use(router)
app.mount("#app")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

页面vue框架

App.vue

1
2
3
4
5
6
7
8
9
10

MainView.vue

src/components/MainView.vue

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

LoginView.vue

src/components/LoginView.vue

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
47

关于登录，可详见本人《vue3-简单登录认证前端实现样例-CSDN博客》一文。

路由设置

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import MainView from '../components/MainView.vue'
import LoginView from '../components/LoginView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: MainView
    },
    {
    path: '/aaa',
      name: 'aaa',
      component: MainView,
      children:[
        {
          path: 'aaa/bbb',
          name: 'aaa_bbb',
          component: () => import('@/components/xxxx.vue'),
          meta:{
          }
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: LoginView,
      meta:{title:"登录"}
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'NoFound',
        component: () => import('@/components/404.vue'),
        meta:{title:"404"}
    },
  ]
})
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

关于多级路由设置，详见本人《vue3-多级路由实现登录页面与业务功能页面分离_扬雨于今的博客-CSDN博客》