Vue3-（一）Vite2创建Vue3项目

本文最后更新于：March 15, 2022 am

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

Vite创建Vue3项目

1
npm init vite@latest

执行后会让输入项目名称，然后再选择所用的东西。

引用其他

1
2
3
4
5
npm i vue-router@4 # 安装router
npm i axios -S # axios
npm install @element-plus/icons-vue # element-plus的图标库
npm install element-plus --save # element-plus
npm i vuex@next # vuex

配置

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue'
import request from "./request/request.js";


const app = createApp(App)

for (const icname in ElIcons){
    app.component(icname,ElIcons[icname])
}
app.config.globalProperties.$http = request
app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app')

路由

router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createRouter, createWebHistory } from 'vue-router'
import {defineAsyncComponent} from "vue";
import request from "../request/request";
const router = createRouter({
  history: createWebHistory(),  // history 模式
  routes:[
     {
        path: '/dw',
        name: 'dw',
        component: defineAsyncComponent(()=>import('../views/tttcheck.vue')),
     },
    {
      path: '/',
      name: 'index',
      component: defineAsyncComponent(()=>import('../components/HelloWorld.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
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
    {
        path: '/dw',
        name: 'dw',
        component: ()=>import('../views/tttcheck.vue'),
    },
    {
        path: '/',
        name: 'index',
        component: ()=>import('../components/HelloWorld.vue'),
    }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

推荐第一种。**组件必须加上 .vue **

axios

request/request.js

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
import axios from 'axios'

const request = axios.create({
    baseURL: 'http://localhost:8081',
    timeout: 10000
})

// request 拦截器
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    // let usertoken = localStorage.getItem("token")?JSON.parse(localStorage.getItem("token")):null

    // let usertoken = localStorage.getItem("token")
    //
    // config.headers['token'] = usertoken;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        // console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request


vuex

store/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

修改启动端口

找到package.json文件，将dev修改为：

1
"dev": "vite --port 8080",

其中 8080 为自定义端口，如果使用默认的3000，将 --port 8080 删除即可。