vue3 环境搭建

环境搭建

• 直接使用脚手架
• node版本最好 >=18,推荐nvm

# vue脚手架
npm install -g @vue/cli

# 安装pnpm命令，替换npm
npm install -g pnpm

# 创建vue3 js项目
pnpm create vue@latest

结构说明

• public: 公共资源，其中资源可直接引用
• src: 核心目录
  • assets: 图片、字体等静态资源
  • router: 路由配置,页面导航配置
  • views: vue组件视图
  • main.js: 入口文件，初始化vue和挂载根组件
  • App.vue: 根组件，主视图文件
• vite.config.js: vite配置
• index.html: 主 HTML 文件，vue 会将组件内容挂载到其中

创建和启动

• 已删除无关目录和文件
• 修改App.vue
• 创建首页组件
• 配置组件路由

App.vue

• <script setup>是简化语法，不用再export default{}
• RouterView是 Vue Router 中的组件，用于显示当前路由对应的组件内容

即路由对应什么组件【在router/index.js】，这里就会替换为对应组件的内容

<script setup>
import {RouterView} from 'vue-router'
</script>

<template>
  <RouterView/>
</template>

main.js

• 初始化vue和根组件App.vue
• 挂载其他组件，如Router,UI

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)  // 全局注册路由
app.mount('#app')

views创建组件

IndexView.vue

这里只是测试，src\views\IndexView.vue

• HTML显示变量count,使用语法，显示按键，按键执行增加方法
• Js使用ref创建引用对象count，操作该对象递增，<script setup>会自动返回该对象和方法

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import {ref} from 'vue'

const count = ref(0)

const increment = () => {
  count.value++
}
</script>

index.js

路由配置，配置了根目录对应IndexView.vue组件的内容

• 路径
• 名称
• 按需加载路径对应的展示组件

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

const router = createRouter({
  // 使用 HTML5 历史记录模式，URL无#号
  // import.meta.env.BASE_URL，默认路由是 /，如果要修改，可以创建 .env 文件修改
  history: createWebHistory(import.meta.env.BASE_URL),
  // 路由规则
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import('@/views/IndexView.vue'),
    },
  ],
})

export default router

启动

pnpm run dev

效果