搭建一个简单的vue3项目

vue3项目的创建

环境准备

nodejs
vscode
在正式开发之前，我推荐使用 VS Code 的官方扩展插件 Volar，这个插件给 Vue 3 提供了全面的开发支持。我们可以在vscode里面的扩展市场去快速安装

对于vue2官方推荐使用Vue-cli创建项目；而对于Vue3，我建议使用Vite创建项目，因为使用vite能够提供更好更快的调试体验。
而使用vite的环境，我们只需要有node.js就可以了

接下来我们开始使用vite创建一个vue3 项目

我们在项目文件夹下打开命令行窗口执行 npm init @vitejs/app
根据提示完成项目的初始化
Project name 项目名称
select a framework 这一行我们选择框架的名字这里我们选vue
select a variant 这一行我们为了简单的入门vue3没有使用TS 所以我们还是选择vue

3.我们 cd vite-project 进入项目目录
4. 运行 npm install 安装依赖
5. 安装完成之后 npm run dev 运行项目在这里插入图片描述

项目目录

我们看一下 vite-project 下面的文件目录，这个目录就是我们项目启动的骨架了。目录中的 index.html 是项目的入口；package.json 是管理项目依赖和配置的文件；public 目录放置静态资源，比如 logo 等图片；vite.config.js 就是和 Vite 相关所有工程化的配置；src 就是工作的重点，我们大部分的代码都会在 src 目录下管理和书写，后面我们也会在 src 目录下细化项目规范。

.
├── README.md
├── index.html           入口文件
├── package.json
├── public               资源文件
│   └── favicon.ico
├── src                  源码
│   ├── App.vue          单文件组件
│   ├── assets
│   │   └── logo.png
│   ├── components   
│   │   └── HelloWorld.vue
│   └── main.js          入口
└── vite.config.js vite工程化配置文件

现在，项目的架构是下图所示的这个样子，这样我们的项目就拥有了工程化的雏形。我们来从下往上看这个架构：我们所有工程化体系都是基于 Node.js 生态；我们使用 VS Code+Volar 编辑器 + 语法提示工具作为上层开发工具；使用 Vite 作为工程化工具；使用 Chrome 进行调试，这些都是 Vue 3 工程化体系的必备工具。
在这里插入图片描述
我们开发的项目是多页面的，所以 vue-router 和 Vuex 也成为了必选项，就像一个团队需要人员配比，Vue 负责核心，Vuex 负责管理数据，vue-router 负责管理路由。我们在 vite-project 目录中使用下面这段代码安装 Vuex 和 vue-router。

npm install vue-router@next vuex@next

规范

├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
│   ├── router         路由配置
│   ├── store          vuex数据
│   └── utils          工具函数

我们的页面需要引入路由系统，我们进入到 router 文件夹中，新建 index.js，写入下面的代码：

import {
    
    
    createRouter,
    createWebHashHistory,
  } from 'vue-router'
  import Home from '../pages/home.vue'
  import About from '../pages/about.vue'
  
  const routes = [
    {
    
    
      path: '/',
      name: 'Home',
      component: Home
    },
    {
    
    
      path: '/about',
      name: 'About',
      component: About
    }
  ]
  
  const router = createRouter({
    
    
    history: createWebHashHistory(),
    routes
  })
  
  export default router

上面的代码中，我们首先引入了 createRouter 和 createWebHashHistory 两个函数。createRouter 用来新建路由实例， createWebHashHistory 用来配置我们内部使用 hash 模式的路由，也就是 url 上会通过 # 来区分。
之后在上面的代码里，我们引入两个组件 Home 和 About，根据不同的访问地址/ 和/home 去渲染不同的组件，最后返回 router 即可。
现在页面就会报错，提示我们找不到 home 和 about 这两个组件，然后我们去 pages 下面新建两个文件就可以了。

注意，这两个文件是以 .vue 作为后缀的，这是 Vue 中单文件组件的写法，我们可以在一个文件中通过 template、script 和 style 来维护 Vue 组件的 HTML、JavaScript 和 CSS。然后我们在 main.js 中，加载 router 的配置：

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App)
    .use(router)
    .mount('#app')

然后去 App.vue 中，我们删掉 template 之前的代码，加入如下内容：

<template>
  <div>
    <router-link to="/">首页</router-link> | 
    <router-link to="/about">关于</router-link>
  </div>
  <router-view></router-view>
</template>

代码中的 router-link 和 router-view 就是由 vue-router 注册的全局组件，router-link 负责跳转不同的页面，相当于 Vue 世界中的超链接 a 标签； router-view 负责渲染路由匹配的组件，我们可以通过把 router-view 放在不同的地方，实现复杂项目的页面布局。