宁波城乡建设局管方网站,内网网站建设主流语言,个人网站申请空间,河南省建设厅代建中心目录 1_Vue组件化开发思想1.1_认识组件化开发1.2_Vue的组件化1.3_注册组件的方式 2_Vue的全局组件3_Vue的局部组件4_Vue的开发模式和解析4.1_Vue的开发模式4.2_单文件的特点4.3_如何支持SFC4.4_VSCode对SFC文件的支持 5_Vue CLI安装和使用5.1_Vue CLI脚手架5.2_Vue CLI 安装和使… 目录 1_Vue组件化开发思想1.1_认识组件化开发1.2_Vue的组件化1.3_注册组件的方式 2_Vue的全局组件3_Vue的局部组件4_Vue的开发模式和解析4.1_Vue的开发模式4.2_单文件的特点4.3_如何支持SFC4.4_VSCode对SFC文件的支持 5_Vue CLI安装和使用5.1_Vue CLI脚手架5.2_Vue CLI 安装和使用5.3_vue create 项目的过程5.4_项目的目录结构5.5_Vue CLI的运行原理 6_Vue项目的创建方式–Vite 1_Vue组件化开发思想 人面对复杂问题的处理方式 任何一个人处理信息的逻辑能力都是有限的所以当面对一个非常复杂的问题时不太可能一次性搞定一大堆的内容。但是人有一种天生的能力就是将问题进行拆解。如果将一个复杂的问题拆分成很多个可以处理的小问题再将其放在整体当中你会发现大的问题也会迎刃而解。 1.1_认识组件化开发 组件化也是类似的思想 如果将一个页面中所有的处理逻辑全部放在一起处理起来就会变得非常复杂而且不 利于后续的管理以及扩展但是将一个页面拆分成一个个小的功能块每个功能块完成属于自己这部分独立的 功能那么之后整个页面的管理和维护就变得非常容易了如果将一个个功能块拆分后就可以像搭建积木一下来搭建的项目 无论从三大框架Vue、React、Angular还是跨平台方案的Flutter甚至是移动端都在转向组件化开发包括小程序的开发也是采用组件化开发的思想。 所以学习组件化最重要的是它的思想每个框架或者平台可能实现方法不同但是思想都是一样的。 需要通过组件化的思想思考整个应用程序 将一个完整的页面分成很多个组件每个组件都用于实现页面的一个功能块而每一个组件又可以进行细分而组件本身又可以在多个地方进行复用 1.2_Vue的组件化 组件化是Vue、React、Angular的核心思想 前面的createApp函数传入了一个对象App这个对象其实本质上就是一个组件也是应用程序的根组件组件化提供了一种抽象让可以开发出一个个独立可复用的小组件来构造的应用任何的应用都会被抽象成一颗组件树 1.3_注册组件的方式 如果现在有一部分内容模板、逻辑等希望将这部分内容抽取到一个独立的组件中去维护这个时候如何注册一个组件呢 注册组件分成两种 全局组件在任何其他的组件中都可以使用的组件局部组件只有在注册的组件中才能使用的组件 2_Vue的全局组件 全局组件需要使用全局创建的app来注册组件 通过component方法传入组件名称、组件对象即可注册一个全局组件了之后可以在App组件的template中直接使用这个全局组件 bodydiv idapp!-- 1.内容一: --product-item/product-item!-- 2.内容二: --product-item/product-item!-- 3.内容三: --product-item/product-item/div!-- 组件product-item的模板 --template iditemdiv classproducth2我是商品/h2div商品图片/divdiv商品价格: span¥9.9/span/divp商品描述信息, 9.9秒杀/p/div/templatescript src../lib/vue.js/scriptscript/*1.通过app.component(组件名称, 组件的对象)2.在App组件的模板中, 可以直接使用product-item的组件*/// 1.组件: App组件(根组件)const App {}// 2.创建appconst app Vue.createApp(App)// 3.注册一个全局组件// product-item全局组件app.component(product-item, {template: #item})// 2.挂载appapp.mount(#app)/script /body全局组件的逻辑 组件本身也可以有自己的代码逻辑 比如自己的data、computed、methods等等 组件的名称 在通过app.component注册一个组件的时候第一个参数是组件的名称定义组件名的方式有两种 方式一使用kebab-case短横线分割符。 当使用 kebab-case (短横线分隔命名) 定义一个组件时你也必须在引用这个自定义元素时使用 kebab-case例如 my-component-name 方式二使用PascalCase驼峰标识符 当使用 PascalCase (首字母大写命名) 定义一个组件时你在引用这个自定义元素时两种命名法都可以使用。 比如 my-component-name 和 MyComponentName 都是可接受的 3_Vue的局部组件 全局组件往往是在应用程序一开始就会全局组件完成那么就意味着如果某些组件并没有用到也会一起被注册 比如注册了三个全局组件ComponentA、ComponentB、ComponentC在开发中只使用了ComponentA、ComponentB如果ComponentC没有用到但是依然在全局进行了注册那么就意味着类似于webpack这种打包工具在打包的项目时依然会对其进行打包这样最终打包出的JavaScript包就会有关于ComponentC的内容用户在下载对应的JavaScript时也会增加包的大小 所以在开发中通常使用组件的时候采用的都是局部注册 局部注册是在需要使用到的组件中通过components属性选项来进行注册比如之前的App组件中有data、computed、methods等选项了事实上还可以有一个components选项该components选项对应的是一个对象对象中的键值对是 组件的名称: 组件对象 bodydiv idapphome-nav/home-navproduct-item/product-itemproduct-item/product-itemproduct-item/product-item/divtemplate idproductdiv classproducth2{{title}}/h2p商品描述, 限时折扣, 赶紧抢购/pp价格: {{price}}/pbutton收藏/button/div/templatetemplate idnavdiv-------------------- nav start ---------------/divh1我是home-nav的组件/h1product-item/product-itemdiv-------------------- nav end ---------------/div/templatescript src../lib/vue.js/scriptscript// 1.创建appconst ProductItem {template: #product,data() {return {title: 我是product的title,price: 9.9}}}// 1.1.组件打算在哪里被使用const app Vue.createApp({//局部组件注册components: {ProductItem,HomeNav: {template: #nav,components: {ProductItem}}},// data: option apidata() {return {message: Hello Vue}}})// 2.挂载appapp.mount(#app)/script /body4_Vue的开发模式和解析 4.1_Vue的开发模式 之前使用vue的过程都是在html文件中通过template编写自己的模板、脚本逻辑、样式等。 但是随着项目越来越复杂会采用组件化的方式来进行开发 这就意味着每个组件都会有自己的模板、脚本逻辑、样式等当然依然可以把它们抽离到单独的js、css文件中但是它们还是会分离开来也包括的script是在一个全局的作用域下很容易出现命名冲突的问题并且的代码为了适配一些浏览器必须使用ES5的语法在编写代码完成之后依然需要通过工具对代码进行构建、代码 所以在真实开发中可以通过一个后缀名为 .vue 的Single-File Components (单文件组件) 来解决并且可以使用 webpack或者vite或者rollup等构建工具来对其进行处理。 4.2_单文件的特点 Single-fFle Components (单文件组件) 在这个组件中可以获得非常多的特性 代码的高亮ES6、CommonJS的模块化能力组件作用域的CSS可以使用预处理器来构建更加丰富的组件比如TypeScript、Babel、Less、Sass等 4.3_如何支持SFC 想要使用SFC的.vue文件比较常见的是两种方式 方式一使用Vue CLI来创建项目项目会默认帮助配置好所有的配置选项可以在其中直接使用.vue文件 方式二自己使用webpack或rollup或vite这类打包工具对其进行打包处理 最终无论是后期做项目还是在公司进行开发通常都会采用Vue CLI的方式来完成 4.4_VSCode对SFC文件的支持 真实开发中多数情况下都是使用SFC single-file components (单文件组件) 。 VSCode对SFC的支持 插件一Vetur从Vue2开发就一直在使用的VSCode支持Vue的插件插件二Volar官方推荐的插件 5_Vue CLI安装和使用 5.1_Vue CLI脚手架 前面学习了如何通过webpack配置Vue的开发环境但是在真实开发中不可能每一个项目从头来完成所有的 webpack配置这样显示开发的效率会大大的降低 在真实开发中通常会使用脚手架来创建一个项目Vue的项目使用的就是Vue的脚手架脚手架其实是建筑工程中的一个概念在软件工程中也会将一些帮助搭建项目的工具称之为脚手架 Vue的脚手架就是Vue CLI CLI是Command-Line Interface, 翻译为命令行界面 可以通过CLI选择项目的配置和创建出的项目 Vue CLI已经内置了webpack相关的配置不需要从零开始配置 5.2_Vue CLI 安装和使用 找到一个终端。cmd或者git bash都可以。 安装Vue CLI目前最新的版本是v5.0.8一般进行全局安装这样在任何时候都可以通过vue的命令来创建项目 npm install vue/cli -g 升级Vue CLI。 如果是比较旧的版本可以通过下面的命令来升级 npm update vue/cli -g 安装好之后可以通过npm -version查看npm 版本号也从侧面反映出来脚手架是否安装成功。 通过Vue的命令来创建项目 Vue create 项目的名称 5.3_vue create 项目的过程 下图示例。 上下方向键可以跳到对应选项单击空格键可以选中某个选项确定选项后单击回车键确定进入下一环节。 5.4_项目的目录结构 5.5_Vue CLI的运行原理 6_Vue项目的创建方式–Vite 参考官网 Home | Vite中文网 (vitejs.cn) Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org) 在终端输入命令 npm int vitelatest 参考文章[使用Vite快速创建vue3项目超级简单超级快速_vite搭建vue3_银子先生的博客-CSDN博客]