项目实践(vue3)

最新推荐文章于 2025-07-13 13:34:06 发布

原创最新推荐文章于 2025-07-13 13:34:06 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #前端 #javascript

本文详细介绍了使用vite脚手架创建Vue3.0项目的过程，包括vite项目配置、 vant-ui的添加及组件使用，以及如何为项目添加less或scss支持。同时，还涵盖了devtool的设置和简单路由配置的步骤，如安装模块、创建组件、配置路由等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. vite脚手架创建vue3.0项目#

安装脚手架
```
npm install -g create-vite-app
```
创建项目此处的projectName是指项目名字
```
create-vite-app projectName
```
安装依赖

用vscode打开项目, 运行 npm i

运行项目

npm run dev // 可以在package.json里修改

预览项目

用浏览器打开: http://localhost:3000

(二) vite项目配置(vue3)#

根目录新建vite.config.js

(1) 添加 @vitejs/plugin-vue

更新vite版本 npm i vite@2.8.4
安装插件npm i @vitejs/plugin-vue

(2) 添加配置

根目录新建vite.config.js (vite的配置文件)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

(三) 添加vant-ui#

vant文档地址: Vant 3 - Mobile UI Components built on Vue

安装依赖 npm i vant

导入所有组件(项目一般按需导入)

import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp();
app.use(Vant);

使用

<template>
	<van-button type="primary">按钮</van-button>
</template>

(四) 添加less或者scss支持#

任选其一

(1) less支持#

npm install less less-loader@6.0.0 --save-dev

(2) scss支持#

npm i sass sass-loader -D

测试是否生效

<style lang="scss" scoped>
div {
  p {
    color:red;
  }
}
</style>

(五) devtool#

vue开发调试工具

下载 http://soft.huruqing.cn
添加到chrome扩展程序里

(六)配置简单的路由

(1) 安装模块(插件)

npm install vue-router@4

(2) 创建组件

/src/views/home/home.vue /src/views/about/about.vue

<template>
    <div>home组件</div>
</template>

(3) 创建路由

/src/router/index.js

// createRouter用来创建路由对象, createWebHistory,createWebHashHistory用来指定路由模式
import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router';

// 路由数组
const routes = [
    {
        path: '/home',
        comment: ()=>import('../views/home/home.vue')
    },
    {
        path: '/about',
        comment: ()=>import('../views/about/about.vue')
    }
]

// 创建路由对象
const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

(4) 挂载路由

/src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
// 导入router
import router from './router/index'

// 挂载路由
const app = createApp(App)
app.use(router)
app.mount('#app')

(5) 配置路由出口 app.vue/放路由出口

<template>
  <div class="box">
    <p>
      <router-link to="/home">home</router-link>
      <router-link style="margin-left: 20px;" to="/about">about</router-link>
    </p>
    <hr />
    <!-- 路由出口 -->
    <router-view></router-view>
    <p>111111111111111111</p>
    <p>222222222222222222</p>
    <p>333333333333333333</p>
  </div> 
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "hello world",
    };
  },
};
</script>