vue3+vite搭建项目应用

一、搭建项目
1、注意Node的兼容性：

Vite 需要 Node.js 版本 >= 12.0.0 ！！！

2、创建项目
使用 NPM:

npm init vite@latest

使用 Yarn:

yarn create vite 
或者
yarn create vite vite-demo --template react-ts // 直接项目一步到位 项目名 使用的语言框架

使用 PNPM:

pnpm create vite

使用任一指令来创建你的第一个项目！

我这边以npm为例来执行一下：

输入npm init vite@latest 后会提示你输入项目名称、框架、语言js/ts等，如下
在这里插入图片描述
在接着根据上图的流程提示执行：1.切换到项目目录 2.初始化项目（下载依赖） 3.运行项目
最终项目运行成功啦！

验证是否运行成功，输入上图地址，得到下图所示即表示项目搭建成功了

我们所有工程化体系都是基于 Node.js 生态；我们使用 VS Code+Volar 编辑器 + 语法提示工具作为上层开发工具；使用 Vite 作为工程化工具；使用 Chrome 进行调试，这些都是 Vue 3 工程化体系的必备工具。

3、总结
使用vite创建完项目后，你会发现vite项目内携带的插件很少，相对于vue-cli创建项目来说少了可选项操作。这一点相对于来说麻烦一点，一些配置项需要咱们自己来配置；
最后把vite中文网附上，相信后续vite也会增添一些可选项配置；
Vite中文网

二、项目的配置
我们看一下 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工程化配置文件

我们开发的项目是多页面的，所以 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.vue和about.vue的页面（即业务页面等），应用到项目中，在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 放在不同的地方，实现复杂项目的页面布局。
得到：
在这里插入图片描述
一个项目搭建到应用就基本有一个雏形了。
当然我们还可以有一些项目的配置，比如依赖插件，多个运行环境的配置等可参照我的下一篇文章
vue3项目配置

vue3+vite搭建项目应用

猜你喜欢