项目实践(vue3)

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

1. 安装脚手架

   npm install -g create-vite-app
   

2. 创建项目 此处的projectName是指项目名字

   create-vite-app projectName
   

3. 安装依赖 

   用vscode打开项目, 运行 npm i

4. 运行项目

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

5. 预览项目

   用浏览器打开: 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

1. 安装依赖 npm i vant

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

   import { createApp } from 'vue';
   import Vant from 'vant';
   import 'vant/lib/index.css';
   
   const app = createApp();
   app.use(Vant);
   

3. 使用

   <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开发调试工具

1. 下载 http://soft.huruqing.cn
2. 添加到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>