从零搭建vue3项目

A_Big_Banana

已于 2024-08-18 12:03:13 修改

阅读量1.2k

点赞数 2

分类专栏： vue3项目搭建文章标签： vue elementui less

于 2021-09-22 21:49:24 首次发布

本文链接：https://blog.csdn.net/qq_43766999/article/details/120423750

版权

vue3项目搭建专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（一）准备环境到使用vite初始化项目

一.安装node.js环境

node.js中文官网：https://nodejs.org/zh-cn/

1.选择稳定版本下载

2.安装一直next就可以（同意协议，选择安装位置）

。。。

3.校验安装结果

在cmd命令窗口中输入指令查看对应版本

# 查看node版本
$ node -v
# 查看npm版本
$ npm -v
# 安装一个cnpm
$ npm install cnpm -g --registry=https://registry.npm.taobao.org

二、安装vue.js

vue3官网：https://v3.cn.vuejs.org/

1.在页面上以 CDN 包的形式导入

2.下载 JavaScript 文件并自行托管

3.使用 npm 安装它

4.使用官方的 CLI 来构建一个项目

# 全局安装vue-cli
$ cnpm install -g @vue/cli
# 查看版本
$ vue -V

三、使用 vite 构建 vue 项目

1.创建一个文件夹用于存放项目

2.使用指令vite创建vue3项目

# 创建vite项目，选择vue -> 选择vue-ts
$ npm init @vitejs/app myProject
# 进入项目
$ cd myProject
# 安装依赖
$ npm install
# 启动项目
$ npm run dev

到此，一个使用vite创建的vue3项目被成功启动！！！
在这里插入图片描述

（二）安装element plus组件库

element-plus官网：https://element-plus.org/zh-CN/

一、使用npm包管理器安装

# 安装指令
$ npm install element-plus --save

使用cdn引入

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@next"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

二、全局引用

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

三、按需求引用

先安装unplugin-vue-components 和 unplugin-auto-import这两款插件

$ npm install -D unplugin-vue-components unplugin-auto-import

再把下列代码插入到你的 Vite 或 Webpack 的配置文件中

//========== vite.config.js ==========
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

//========== webpack.config.js ==========
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

（三）安装配置vue router

安装vue router 4.x

vue router官网：https://next.router.vuejs.org/zh/

一、使用npm包管理器安装

# 安装指令
$ npm install vue-router@4

直接下载或者使用cdn引入

https://unpkg.com/vue-router@4

二、创建一个公共基础配置项文件

// src目录下创建一个router目录router目录下创建一个index.ts

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

//  路由配置
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        component: () => import('../views/Home.vue'),
        meta: {
            title: 'Home'
        },
    }
];

// router实例
const router = createRouter({
    history: createWebHistory(),
    routes,
});


// 全局前置守卫
router.beforeEach((to, from, next) => {
    next();
});

// 全局解析守卫
router.beforeResolve(async to => {});

// 全局后置钩子
router.afterEach((to, from, failure) => {
    // if (!failure) sendToAnalytics(to.fullPath)
});

export default router

三、在main.ts中全局使用

// main.ts
import Router from './router/router'

app.use(Router)

四、在合适的地方使用路由

<p>
	<router-link :to="{name:'home'}">To Home</router-link>
</p>
<router-view></router-view>

遇见了一个坑，因为暂时没有用的路由前置守卫，所以直接把里面的内容直接注释了，没有调用next()；导致一直没有效果！

五、动态路由

简介：路径参数用冒号 : 表示

const routes = [
  /*
  	当一个路由被匹配时，它的 params 的值将在每个组件中以this.$route.params 的形式暴露出来
  	<div>User {{ $route.params.id }}</div>
  	单个路径参数 example:/user/10086、user/10000
  	{ userId: 'eduardo' }
  */
  { path: '/user/:userId', component: UserDetail.vue },
  
  
  /*
  	多个路径参数，它们会映射到 $route.params 上的相应字段
  	/users/BigBanana/posts/123
  	{ username: 'BigBanana', postId: '123' }
  */
   { path: '/users/:username/posts/:postId', component: User.vue },
]

六、响应参数变化

// 1.watch中监听 $route 对象上的任意属性
const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化做出响应...
      }
    )
  },
}

// 2.使用 beforeRouteUpdate 导航守卫，它也可以取消导航：
const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    // 对路由变化做出响应...
    this.userData = await fetchUser(to.params.id)
  },
}