Vue3使用vite如何初始化项目如何使用setup进行开发

dearweb 发布：2021-09-12 21:43:18阅读：

vue作为国内使用最多的开发框架之一，其迭代速度也是比较快的，2020年vue3.x出来以后，越来越多的企业逐渐将项目迁移到v3.x版本了，至于vue3.x之后我们使用vite工具进行构建项目以及setup进行开发的效率如何？下面小编简单来聊聊。

使用 vite 初始化项目

vite 是一款与 webpack 有着相同作用的一款对标产品，他的特点是应用了 script 标签上新增的 type="module" 方式让 js 代码支持 Esmodule 语法的新特性来让项目在开发环境中可以更加快速的得到编译和运行，并且轻量的体积也是他相对于臃肿的 webpack 对初学者也具有更加的友好度，并且如果你是一个资深的 webpack 开发工程师那么你还可以无缝的过渡到 vite 生态中。

基于以上的特点，加上他对其他生态（如 react 等前端框架的编译和运行）的支持，使得 vite 现在已经成为了可以追赶 webpack 的一个脚手架环境之一。

初始化 vite 脚手架

vite 的简洁之处使他初始化项目不费吹灰之力，只需要在命令行工具中输入

npm init vite-app

我们的 vite 项目就会成功的初始化如下。

xxl@xxl vue3-test % npm init vite-app
Scaffolding project in /Users/xxl/Desktop/vite/vue3-test...
Done. Now run:
 npm install (or `yarn`) # 开发环境的运行命令
 npm run dev (or `yarn dev`) # 发布生产的运行命令
zhangyunpeng@zhangyunpengdeMacBook-Pro vue3-test % tree
. # 项目结构介绍
├── index.html #模版页面，相当于 VueCli 中的 public 中的 index.html
├── package.json #依赖表
├── public #静态资源文件夹
│ └── favicon.ico
└── src #源代码文件夹
 ├── App.vue #根组件
 ├── assets #源码级别的静态资源
 │ └── logo.png
 ├── components #自定义组件目录
 │ └── HelloWorld.vue #自定义组件
 ├── index.css #样式文件
 └── main.js #入口 js 文件

项目说明

首先查看 index.html 文件我们会发现代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="icon" href="/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Vite App</title>
</head>
<body>
 <div id="app"></div>
 <script type="module" src="/src/main.js"></script>
</body>
</html>

这里我们通过查看得知 main.js 是直接加载到 index.html 中运行的，这里声明了 script 标签的 type="module" 所以我们可以直接在 main.js 中使用 ESModule 的方式来加载 js 模块。

安装依赖启动项目

在当前目录使用

npm install

来将我们需要的依赖包安装,然后运行项目启动命令

xxl@xxl-Pro vue3-test % npm run dev
> vue3-test@0.0.0 dev
> vite
[vite] Optimizable dependencies detected:
vue
Port 3000 is in use, trying another one...
 Dev server running at:
 > Local: http://localhost:3001/ # vite 默认占用 3000 端口如果 3000 端口被占用则顺次启动+1 端口
 > Network: http://192.168.0.113:3001/
运行成功之后我们访问http://localhost:3001/查看页面

到这为止我们便成功的使用 vite 进行了项目启动，关于 vite 更深入的学习后续文章中我会慢慢道来。

改造项目结构

追加路由系统

首先我们打开 package.json 查看依赖表如下

{
 "name": "vue3-test",
 "version": "0.0.0",
 "scripts": {
  "dev": "vite",
  "build": "vite build"
 },
 "dependencies": {
  "vue": "^3.0.4" //我们发现这里默认使用的 vue 版本为 3.0.4
 },
 "devDependencies": {
  "vite": "^1.0.0-rc.13",
  "@vue/compiler-sfc": "^3.0.4"
 }
}

根据当前的依赖我们需要对应使用的路由为 VueRouter4 系列版本，该版本为 VueRouter 专门针对 Vue3 之后的框架版本开发的，所以安装方式也和之前不同，所以我们需要停止服务器运行并且运行如下代码

npm i vue-router@next -s

安装成功之后的 package.json 如下

{
 "name": "vue3-test",
 "version": "0.0.0",
 "scripts": {
  "dev": "vite",
  "build": "vite build"
 },
 "dependencies": {
  "vue": "^3.0.4",
  "vue-router": "^4.0.11" #这里出现的 router 版本为 4.x 系列
 },
 "devDependencies": {
  "@vue/compiler-sfc": "^3.0.4",
  "vite": "^1.0.0-rc.13"
 }
}

改造目录结构

首先我们需要将项目的目录改造为如下结构

├── package-lock.json
├── package.json
├── public
│ └── favicon.ico
└── src
 ├── App.vue
 ├── assets
 │ └── logo.png
 ├── components
 │ └── HelloWorld.vue
 ├── index.css 
 ├── main.js
 + ├── router #追加路由目录
 + │ └── index.js #追加路由配置文件
 + └── views #追加视图目录
 +  ├── About.vue #追加视图文件
 +  └── Index.vue #追加视图文件

关于 router/index.js 中的代码如下

//VueRouter4.x 将路由整体对象做了按需加载处理，支持 treeshaking 所以我们可以只加载需要的模块代码

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

关于 views/Index.vue 中的代码如下

<template>
 <div>
  {{title}}
 </div>
</template>
<script>
 export default{
  data(){
   return {
    title:'首页'
  }
 }
 }
</script>
<style scoped>
</style>

关于 views/About.vue 中的代码如下

<template>
 <div>
 关于
 </div>
</template>
<script>
</script>
<style scoped>
</style>

改造入口文件和 App.vue

接下来我们在 main.js 中做如下更改

import { createApp } from 'vue'
import App from './App.vue'
//引入路由对象
import router from './router'
import './index.css'
//Vue3 的新写法，链式调用的形式初始化项目
createApp(App).use(router).mount('#app')

改造 App.vue 首页代码如下

<template>
 <div>
  <router-link to="/">首页</router-link> |
  <router-link to="/about">关于</router-link> 
  <br/>
  <router-view />
 </div>
 
</template>
<script>
export default {
 name: 'App'
}
</script>

接下来我们启动服务

npm run dev

可以通过控制台返回的数据进行访问首页。

Vue3 的 setup 用法

根据上述代码开发想必大家已经成功的启动了项目并且测试了首页和关于两个页面的跳转功能，发现整体搭建上和 VueCli+Vue2 的方式有些出入但是整体还是能接受的。接下来颠覆 vue 开发者开发习惯的部分来了。

setup 函数的注入

我们在首页的代码中已经看见 Vue3 中还是可以正常编写 Vue2 的原始代码风格的，接下来我们在项目中追加如下代码将首页改造。

<template>
 <div>
  {{title}}
  <form action="">
   <input type="text" v-model="user.username"> <br>
   <input type="text" v-model="user.password">
  </form>
  {{user}}
  <br>
  <button @click="handleClick">点我</button>
  {{count}}
 </div>
</template>
<script>
 import { ref ,reactive } from 'vue'
 export default{
  data(){
   return {
    title:'首页'
  }
 },
  //setup 函数可以理解为与 reacthooks 方式的 function
  //组件相同功能的函数在内部可以利用任何函数编程的方式来实现 vue 组件功能
  //这里 vue3 又提供了类似 hooks 的解决方案，我们今天只拿 ref 和 reactive 两个来举例子
  //可以理解为这两个相当于 useState 但 reactive 更贴近于 useState
  //具体的使用介绍可以参考 vue3 的官方文档
  setup(){
   const count = ref(0)
   const user = reactive({
    username:'LeoZhang',
    password:'123456'
  })
   const handleClick = () => {
    //ref 创建的对象在视图部分是直接使用属性名称引用
    //但是在 js 部分操作的时候需要操作他的 value 属性来改变它的值
    count.value++
  }
   //我们发现只要是 setup 中 return 返回的属性在视图脚本部分都可以当作 vue 实例上的对象引用
   return {count,user,handleClick}
 }
  
 }
</script>
<style scoped>
</style>

下面我们开始真正的表演

熟悉 vue3 的小伙子们应该对上述代码并不陌生，但是 Vue3.2 版本中即将实现了一个更加劲爆的功能将 vue 的开发体验推上了一个更高的 level，基于这个新的设计再也不会有 react 的小朋友嘲讽 Vue 开发者类似编写配置文件一样的无脑开发了（此处并无挑起战争之意～每个框架都各自有各自的优点和适合的场景，仅仅是调侃而已）

那么废话不多说接下来我们将 About 中的代码改造为如下模样

<template>
 <div>
  {{title}}
  <form action="">
   <input type="text" v-model="user.username">
   <input type="text" v-model="user.password">
  </form>
  {{user}}
  <br>
  <button @click="handleClick">点我</button>
  {{count}}
 </div>
</template>
<!-- setup 模式的 script 让我们在 vue3 中可以完全舍弃过去的代码编写模式 -->
<script setup >
 import { ref, reactive, onMounted } from 'vue'
 onMounted(() => {
  console.log('mounted')
 })
 const title = ref('关于')
 const count = ref(0)
 const user = reactive({
  username:'LeoZhang',
  password:123456
 })
 const handleClick = () => {
  count.value++
 }
</script>
<style scoped>
</style>

我们阅读一下当前的代码，不要把嘴巴张太大～，这里我们会发现神奇的编码方式出现了。

我们发现使用了 setup 的标签中编写的内容彻底脱离了对象让我们好像回到了原生的 html+js 的开发模式，但是它却保留了 vue 所有的特性，这个更新是非常具有里程碑意义的，他让 vue 的开发模式变得空前的灵活，但是可能也会让不同架构师设计的 vue 项目变成几乎和每个人的性格一样充满了不同，但是不得不说相对于 vue2 时代的编码方式这个绝对是一个空前的进步。

vue3.x中vite以及setup今天的分享就到这儿，这只是一个起点，关于 vite 和 webpack 的对比以及使用场景的区别，还有 vue3 的后续生态以及在企业应用中的架构预测作者会在后续的文章中逐渐的分享出来。

小礼物走一波，支持作者

赏

还没有人赞赏，支持一波吧

Vue3使用vite如何初始化项目 如何使用setup进行开发

使用 vite 初始化项目

改造项目结构

Vue3 的 setup 用法

Vue3使用vite如何初始化项目如何使用setup进行开发