解锁前端Vue3宝藏级资料 第一章 Vue3项目创建 3 (Vite 创建 vue项目 )

目前,Vue.js 官网建议在创建新项目的时候要使用 Vite 而不是 Vue CLI,尽量在开发环境中以 Vite 它作为 Vue.js 的编译基础来使用。Vite 是 Vue.js 作者Evan You 制作的 webpack 的无捆绑替代品,Vite + vue 方式很可能会成为未来的vue项目主流方式。

Vite官网 https://cn.vitejs.dev/地址。

Vite 是一种新型前端构建工具,能够显著提升前端项目开发效率。它主要由两部分组成

  • 开发服务器:它基于原生 ES 模块提供了丰富的内建功能,模块热更新(HMR)。
  • 构建指令:它使用 Rollup 打包编译项目代码,并且它是预配置的可输出用于生产环境的高度优化过的静态资源。

现在我们介绍一下如何使用 Vite 工具来创建一个 Vue3 项目的开发环境。

第一章 Vue3项目创建 1 Vue CLI 创建vue项目
第一章 Vue3项目创建 2 使用 Webpack 5 搭建 vue项目
第一章 Vue3项目创建 3 Vite 创建 vue项目
第二章 Vue3 基础语法指令
第三章 Vue Router路由器的使用
第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)

1.3.1 创建vue项目

运行Vite命令创建npm init vite@latest 创建项目,选择vue项目后在选择JavaScript模式,以后可以根据开发者的实际情况来选择对应的开发模式。

bash 复制代码
$ npm init vite@latest zht-vite-vue
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
? Select a framework: >> - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Others
 Select a variant: >> - Use arrow-keys. Return to submit.
>   JavaScript
    TypeScript
    Customize with create-vue ↗
    Nuxt ↗ 
    
Done. Now run:
  cd zht-vite-vue
  npm install
  npm run dev  

执行完成后会创建一个zht-vite-vue项目的文件夹,所以用cd命令进入文件夹下,执行npm install 命令,将所有的 Vue.js+ vite所需的 JavaScript 依赖包加载到你的项目环境中来。

bash 复制代码
$ D:\vue>cd zht-vite-vue
$ D:\vue\zht-vite-vue>npm install

npm install 完成后,使用 npm run dev 命令启动本地开发服务器。在浏览器中输入 URL(http://localhost:5173)会显示项目初始页面。

bash 复制代码
$ npm run dev 
> zht-vite-vue@0.0.0 dev
> vite

  VITE v3.2.0  ready in 1034 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

项目环境正常下出现Vue+Vite的初始画面。

1.3.2 项目结构

txt 复制代码
zht-vite-vue
   |---node_modules
   |---index.html        //运行html
   |---src               //代码源文件
   |    |--components    //组件目录
   |    |     |---HelloWorld.vue  //模块代码
   |    |--main.js       //入口文件
   |    |--App.vue       //模板代码
   |----package.json     //配置文件

1 初始页 index.html

在项目文件夹下的 zht-vite-vue/index.html文件中,描述了vue的初始化 html元素与挂载元素

html 复制代码
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

2 main.js

在 index.html 中的 script 标签引入 main.js 文件。这个文件是Vue3代码与页面的唯一加载文件,文件地址在zht-vite-vue\src目录下。

javascript 复制代码
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')

首先创建一个Vue.js 的实例,实例对象vue通过createApp 函数导入并继承 。导入App.vue 文件,App.vue 文件中描述了页面内容。在通过createApp 中的mount 方法将App中的内容挂载到index.html页面中的id属性为app的div元素中。

3 App.vue

目录中zht-vite-vue\src\App.vue 文件中编写vue模板代码,它分为三个部分(脚本标签、模板标签、样式标签)组成。

vue 复制代码
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

4 HelloWorld.vue

App.vue 文件中的模板标签包含一个自定义标签,与脚本标签中的 HelloWorld.vue 同名,它是我们导入的一个vue模块。vue模块是独立的代码单元,在有需要的它的地通过脚本标签的方法将它加载进来。

vue 复制代码
<script setup>
import { ref } from 'vue'
defineProps({
  msg: String
})
const count = ref(0)
</script>
<template>
  <h1>{{ msg }}</h1>
  <p>
    Install
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

所有具有 vue 扩展名的文件,都统称为单文件组件 (SFC) 文件。在 Vue.js 中,应用程序是通过将 createApp 中指定的 App 组件作为根组件来导入其他组件进行运行的。开发时候可以在根组件 App 中编写所有处理,但随着功能增多,代码会变得越来越臃肿,造成维护和二次开发的困难。

这时候可以通过按功能和业务逻辑来划分组件,将不同功能和业务需求的代码写在不同的vue文件中,通过引用和导入灵活使用它们。

组件之间也是具有树状结构的,它们也会有自己的层级与继承关系。

1.3.3 Vite 编译

在项目中package.json配置了Vite 编译打包与运行的命令。

javascript 复制代码
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }

运行打包命令npm run build ,默认的构建输出路径(dist)在文件下。

bash 复制代码
D:\vue\zht-vite-vue>npm run build
> zht-vite-vue@0.0.0 build
> vite build
vite v3.2.0 building for production...
✓ 16 modules transformed.
dist/assets/vue.5532db34.svg     0.48 KiB
dist/index.html                  0.43 KiB
dist/assets/index.43cf8108.css   1.26 KiB / gzip: 0.65 KiB
dist/assets/index.021287dc.js    52.60 KiB / gzip: 21.19 KiB

在默认的dist文件下编译代码生成。

当你构建完成应用后,你可以通过运行 npm run preview 命令,在本地测试该应用。

bash 复制代码
$ npm run preview
> zht-vite-vue@0.0.0 preview
> vite preview
  ➜  Local:   http://127.0.0.1:4173/
  ➜  Network: use --host to expose

可以在浏览器中http://localhost:4173方便的查看本地环境下构建的html页面代码是否正常。

可以通过 --port 参数来配置更改服务的运行端口。

package.json文件中加入
{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

修改preview参数后,服务器运行 http://localhost:8080

bash 复制代码
$ npm run preview
> zht-vite-vue@0.0.0 preview
> vite preview --port 8080
  ➜  Local:   http://127.0.0.1:8080/
  ➜  Network: use --host to expose
相关推荐
阿伟来咯~15 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端20 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱23 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai32 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨33 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js