Vue3的脚手架搭建

原创已于 2023-10-16 10:31:17 修改 · 383 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-10-10 06:04:16 首次发布

本文介绍了Vue3的脚手架搭建，包括CDN下载和使用Vite创建Vue应用的两种解决方案。讨论了Vue2与Vue3的区别，并强调了Vue3对浏览器版本的要求。文章还详细阐述了使用Vite构建Vue应用的技术细节，如SFC、Node.js版本需求、内置的webpack和babel。最后，提到了PNPM作为优化模块管理的工具，以及构建完整Vue应用的步骤和项目骨架架构分析。

关于Vue的脚手架的认识

vue2的基础部分, 定义，指令，实践，生命周期，监听，计算属性，组件，（指令，动画）。、

官网地址：https://cn.vuejs.org/guide/quick-start.html

01、初认识Vue3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3初认识</title>
</head>

<body>

    <div id="app">
        <button @click="count++">
            Count is: {{ count }}
        </button>
    </div>


    <script>
        // es6模块的导入导出---默认情况下浏览器是不认识的。所以下面的代码编译通不过
        import { createApp } from 'vue'
        var app = createApp({
            data() {
                return {
                    count: 0
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

上面的代码不可能通过，因为浏览器默认情况是不认识：import

解决方案1: CDN下载

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

或者使用

npm install vue

Vue2和Vue3的改变：

// vue3
var app = Vue.createApp({
    data() {
        return {
            count: 0
        }
    }
}).mount('#app')

// vue2
var app = new Vue({
    el:"#app",
    data:{
        count: 0
    }
})

data改成了函数
初始化从new改成了静态方法的方式进行初始化
el使用mount方法进行挂载。

疑惑

vue是一个渐进式的js框架。就告诉：它可以进行混合开发，组件开发，进行单页开发。
那混合开发到底是选择：vue2还vue3，答案：肯定是vue2
因为vue3不支持低版本浏览器。6 7 8
如果未来你公司做项目开发，支持浏览器678建议使用：jQuery

混合开发

架构模型：gin+grom+template+vue
架构体系：单体架构
页面路由的定义：服务端gin/beego来管理
状态管理的定义：session(服务内存map)/cookie(客户端存储技术，存储map的key)
数据的渲染的方式
- 使用模板引擎+数据进行渲染
- vue+axios进行异步请求渲染。

解决方案2: 创建一个 Vue 应用

架构模型：前后端分离

服务端：

架构体系：gin+grom+json

客户端：

架构体系：vue + vite + js
请求方式：axios
页面路由的定义：vue-router
状态管理的定义：pina/vuex

构建Vue应用使用技术

vite 构建一个web服务

页面定义是：sfc (Singer File Component)

https://cn.vuejs.org/guide/scaling-up/sfc.html#introduction

<template>
    <!--如果未来你不喜欢别人定义的好的组件，你完全可以直接使用w3c提供标签定义网页和样式-->
    <p class="greeting">{{ greeting }}</p>
    <!--当然大部分情况，都会使用第三方的组件：（element-plus / antd / 自研组件） -->
    <el-row>
    </el-row>
</template>


<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  },
    methods:{
        loadData(){
            const response = "";
            const person = {...response};
        }
    }
    
}
</script>


<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Nodejs版本要求建议:16.x

下载地址：https://github.com/nodejs/release#release-schedule

具体下载地址：https://nodejs.org/download/release/latest-v16.x/

为什么要用nodejs呢？因为vite构建的服务是使用nodejs的http模块开发出来的。也就说nodejs也提供一个类似于go/java的http模块。这个模块可以自己去定义一个web服务。
内置的webpack和babel

你要明白，我们vite和vue构建的web应用，最终的目的都是为了能够让我开发变得更加简洁方便，但是运行一定是：浏览器。我们知道浏览器是不支持es6 7 8 9 等这些新语法的，所以js就很难推动起来。你学js的新语法糖：promise ,解构，模板字符串，const,let等，肯定直接在浏览器是不可能被识别的出来的。

但是未来在vite的脚手架（小程序，uniapp,taro,flutter,ectron）等，你可以大量的使用。

为什么可以使用，因为里面内置了一个webpack。你编写js代码的，它会自动把最近的语法糖转换成es5语法糖，最后合并成一个js文件，然后把这个编译好的js文件插入到运行首页中，然后浏览器中就执行这个首页。加载所编译的文件和信息。
问：为什么webpack这么可以编译成e6 7 8 到es5呢？

是因为，vite应用程序内部内置了一个babel库，这个库就是专门把es6 7 8 和es5映射的一个库。

let const var

构建我的第一个Vue应用

在早期，官方提供了vue-cli脚手架，但是已经被移除了。官方已经推荐使用：vite

vite是现在构建vue应用的一个利器（内置：nodejs/webpack/vue-cli）
官网：https://vitejs.dev/
https://cn.vitejs.dev/guide/

开始构建

https://cn.vitejs.dev/guide/

兼容性注意

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用 NPM:

npm create vite@latest

使用 Yarn:

先安装

npm install -g yarn

然后在执行vite项目的构建

yarn create vite

使用 PNPM:

先安装：

npm install -g pnpm

然后执行vite 项目构建

pnpm create vite```



把项目导入到vscode开始进行开发和分析。建议把原来的黑窗口关闭，使用vscode的命令行来启动会方便一些：vscode使用快捷键：`ctrl+`` 或者 

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=assets%2Fimage-20230517212350010.png&pos_id=img-TBOtDW3e-1696888951342)

然后运行

```sh
npm run dev
pnpm run dev

访问：http://127.0.0.1:5173/

PNPM

使用npm局部下载都是把模块下载到node_modules，而且数量非常庞大，动不动就是几万甚至几十万的文件不等。就造成这个文件难以维护。其中这些文件很多都是是公共的模块。或者核心模块。其实并不需要下载下来。所以有没有一种优化模块的机制，使用pnpm来进行管理和下载。

官网：https://www.pnpm.cn/

安装：

npm install -g pnpm

开始构建一个完整的Vue应用

启动：

cd mythirdvite
// 安装模块
pnpm install
// 格式化
pnpm format
// 启动项目
pnpm dev

或者使用

npm run dev

访问：

http://127.0.0.1:5174/about

分析项目骨架架构

vite.config.js 项目配置文件，这个文件未来可以做插件注册或者端口改造或者服务映射的时候使用。
package.json 是node项目的模块映射文件就类似于：go.mod 或者 java中的pom.xml。主要就是把你安装过的模块进行记录和依赖。比如：为你要安装vue-router/pinia 你需要执行如下命令:

vue-router : https://router.vuejs.org/zh/

pinia : https://pinia.vuejs.org/zh/
```
npm install vue-router@4
pnpm install vue-router@4
```
index.html 入口首页，你在浏览器访问的跟都是这个页面。或者未来你访问的路由都是基于这个页面来进行内容填充的。
main.js 入口js文件 weback编译入口文件
router 后续在路由的时候使用
store 做状态管理的时候使用
src : 源文件（wepback编译的代码文件）—-templates
- views 目录就是放：spa
- compoments组件目录放：sfc
- assets这里也可以放(js/css/image) 但是这里文件会被webpack编译
  - 如果js 在编译会汇总到最终dist/xxx.js文件中
  - img会自动变成base64::xxxxxxxxx的图片地址
  - css 也会自动汇总到一个总的css中去。
public 公共资源文件(js/css/images)，这里文件不会被webpack编译
- 他可以在spa或者sfc中直接去使用
- 或者在浏览器可以直接访问
- 最终在npm run build 会直接复制一份在dist目录。不会编译成一个js文件。