Vite2+Vue3+TypeScript：搭建企业级轻量框架实践

随着 Vue3 为广大开发者所接受和自身生态逐渐完善，更多同学往vue3的工程化方向完善，本文恰好给大家介绍下如何更好使用vue3及其周边插件，以及让他们组合到整个工程中去。

另外，Vue3支持 Typescript 语法编程也是其中一大亮点，为了 探索 新技术的工程化搭建，本文会把Typescript、vite、pinia等官方周边整合到工程里面。

接下来，为了让大家更好理解本项目工程化的思路，本文会按照以下关键词去逐步研读(看项目代码可跳过前4步)：

{{ count }}

上述例子可以看出， script-setup 弱化了vue模板式编程体验，也使得代码更简洁，开发者只需要引入正确的hooks后，把逻辑写在script内就足以。

本项目所有组件都采用这种开发模式 ，相比于普通的

Nuxtjs 是一个基于 Vuejs 的通用应用框架，预设了利用 Vuejs 开发 服务端渲染 的应用所需要的各种配置。可以更方便的实现 Vue 项目的 SSR 。具体的可详见 官网 ，这里不再过多赘述。

方法一：

方法二：

出现上图即可按照提示， cd 到我们的文件夹，然后运行命令启动项目，启动成功后如下图
assets ：资源目录，用于组织未编译的静态资源如 LESS 、 SASS 或 JavaScript 。
components ：组件目录，用于组织应用的 Vuejs 组件。Nuxtjs 不会扩展增强该目录下 Vuejs 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
layouts ：布局目录，用于组织应用的布局组件。
middleware ：中间件目录，用于存放应用的中间件。
pages 页面目录，用于组织应用的路由及视图。Nuxtjs 框架读取该目录下所有的 vue 文件并自动生成对应的路由配置。
plugins ：插件目录，用于组织那些需要在 根vuejs应用 实例化之前需要运行的 Javascript 插件。
static ：静态文件目录，用于存放应用的静态文件，此类文件不会被 Nuxtjs 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下，即 /static/robotstxt 映射至 /robotstxt
store ：状态管理目录，用于组织应用的 Vuex 状态树 文件。 Nuxtjs 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 indexjs 文件可激活这些配置。
nuxtconfigjs ：用于组织 Nuxtjs 应用的个性化配置，以便覆盖默认配置。
packagejson ：用于描述应用的依赖关系和对外暴露的脚本接口。

更多介绍详见 官网-目录结构

1

解决方法：

Should werun`npm install`foryou after the project has been created (recommended) 

- Yes,useNPM 

- Yes,useYarn 

 -No, I will handle that myself

选择最后的no，I will handle that myself

Vue框架的核心思想是MVVM（Model-View-View-Model），实现了视图和数据的双向绑定，即改变视图会触发数据的改变，同样改变数据会触发视图的改变。

Vue规定每个组件必须只有一个根元素

上一节安装了flask，我们现在需要安装vue前端框架，需要使用vue-cli方便安装和管理。

先要全局安装vue-cli，可以使用下列任一命令安装这个新的包：

你还可以用这个命令来检查其版本是否正确 (3x)：

官方文档
已经安装最新版本的vue-cli，我很推荐这个图形化界面，非常方便。
你也可以通过 vue ui 命令以图形化界面创建和管理项目：
图形化的界面就不需要多介绍了，有中文都能很好地使用。

使用Vue项目管理器，选择项目地址flask-vue根目录（上节运行flask示例的文件夹），创建新项目名称vue。根据具体需求选择创建条件完成项目创建，自动跳转至项目详情页。
下一节Flask与Vue的关联。

前端Vuejs框架是什么？有哪些特点？Vuejs是一个前端框架，用于构建用户界面的渐进式框架。在Vue中一个核心的概念是让用户不再 *** 作DOM元素解放了用户的双手，让程序员可以更多的时间去关注业务逻辑，Vue框架能够提高开发的效率。

科普时刻 ：

黑马程序员vue前端基础教程-4个小时带你快速入门vue

前端开发利器vue，微信小程序快速开发实战

web前端基础必备教程-2小时玩转Vue单元测试

黑马程序员Vue20+Vue30入门到精通，大厂前端岗位必备技能

1、Vuejs是什么？

Vue是一个js库，且无依赖别的js库跟jquery差不多。Vue核心库只关注视图层，非常容易与其它库或已有项目整合。Vuejs是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、Vue的MVVM设计模式是什么？

如果了解前端一定知道MVVM和MVC这两种设计模式，且很有可能对mvp也有一些了解。MVC即model，view，control，jQuery就是采用的这种设计模式。MVVM即model，view，viewmodel，是数据驱动模式，即所有的一切通过 *** 作数据来进行而尽量避免 *** 作DOM树。

不关注DOM结构，考虑数据该如何储存，用户的 *** 作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对DOM的繁琐 *** 作，而是专心于对用户的 *** 作进行处理，避免MVC中control层过厚的问题。

在vue调试方面可以选择安装chrome插件vue Devtools。打开vue项目，在console控制台选择vue面板。在Devtools对象中，可以选择组件，查看对应组件内的数据信息。也可以选择Vuex选项，查看该项目内Vuex的状况变量信息。

3、Vuejs有哪些优点？

声明式，响应式的数据绑定；组件化的开发；Virtual DOM；响应式的数据绑定
（1）jQuery首先获取到DOM对象，然后对DOM对象进行进行值的修改等 *** 作；
（2）Vue首先把值和js对象进行绑定，然后修改js对象值，Vue框架会自动把DOM的值就行更新；
（3）简单理解为Vue帮我们做了DOM *** 作，以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue框架会自动做好DOM相关 *** 作；
（4）DOM元素跟随JS对象值的变化而变化叫做单向数据绑定，若JS对象的值也跟随着DOM元素。

4、需要学习哪些Vuejs框架相关知识点？

Vuejs 安装、Vuejs 目录结构、Vuejs 起步、Vuejs 模板语法、Vuejs 条件语句、Vuejs 循环语句、Vuejs 计算属性、Vuejs 监听属性、Vuejs 样式绑定、Vuejs 事件处理器、Vuejs 表单、Vuejs 组件、Vuejs 组件自定义事件、Vuejs 自定义指令、Vuejs 路由、Vuejs 过渡& 动画、Vuejs 混入、Vuejs Ajax(axios)、Vuejs Ajax(vue-resource)、Vuejs 响应接口、Vuejs 实例等。

Vuejs 是一个JavaScriptMVVM库，一套构建用户界面的渐进式框架。以数据驱动和组件化的思惟构建的，采取自底向上增量开辟的设计。比拟于Angularjs，Vuejs供给了加倍简洁、更易于懂得的API，使得我们快速地上手并应用Vuejs。

vue3 对应使用的是 vue-router@4 版本， 有新的用，但是向下兼容
本文档源码： Lzq811/vite-vue-ts-eslint at vite2+vue3+ts使用vue-router搭建页面框架 (githubcom)

本文的对应源码地址： Lzq811/vite-vue-ts-eslint at vite2+vue3+ts使用vue-router搭建页面框架 (githubcom)

做一个简单的项目大约需要一周的时间。
有编程基础的话，画一个页面一般需要一个星期左右。画好一个页面之后，这个项目还是需要一直来维护的。
vue是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用(SPA)提供驱动。

---