做网站多少钱,网站搭建运营,外贸seo优化公司,培训做网站1.Vue开发的两种方式
#xff08;1#xff09;核心包传统开发模式
基于html/css/js文件#xff0c;直接引入#xff0c;开发Vue。
#xff08;2#xff09;工程化开发模式#xff08;更常用的一种#xff09;#xff1a;
主要是基于构建工具#xff08;例如,webp…1.Vue开发的两种方式
1核心包传统开发模式
基于html/css/js文件直接引入开发Vue。
2工程化开发模式更常用的一种
主要是基于构建工具例如,webpack的环境中开发Vue可以利用构建工具编写一些高级的语法。 但是问题是需要一些复杂的配置配置并不简单各个项目雷同的配置缺乏统一标准 需要一个工具生成标准的配置
Vue Cli 的提出 2.Vue CLI
1基本介绍
是官方提供的一个全局命令工具。
可以帮助我们 快速创建一个开发Vue 项目的标准化基础架子。集成了 webpack配置即一个目录
2好处
1开箱即用零配置2内置babel等工具3标准化
3创建步骤
1全局安装一次
yarn global add vue/cli 或 npm i vue/cli -g 2查看vue安装的版本
vue --version 3创建项目架子
vue create project-name (项目名-不能用中文) 4启动项目
进入目录输入
yarn serve 或者 npm run serve serve这个名字不是固定的可以找package.json中设置 3.项目的目录介绍和运行流程 4.组件化开发和根组件
1组件化
一个页面可以拆分为一个个组件每个组件有着自己独立的结构、样式、行为。
好处便于维护利于复用能够提升开发效率。
组件分类普通组件、根组件
2根组件
整个应用最上层的组件包裹所有普通的小组件。
3组件的构成
每一个组件由三部分构成
1template结构有且只能有一个根元素
2scriptjs逻辑
3style样式可支持 less需要装包 让组件支持less 1style标签langless开启less功能 2装包 yarn add less less-loader 使用scoped解决全局样式的问题 默认情况下写在组件中的样式会全局生效因此很容易造成多个组件之间的样式冲突问题 1全局样式默认组件中的样式会作用到全局 2局部样式可以给组件加上scoped属性可以让样式只作用于当前的组件 原理使得当前组件内的标签都被添加上哈希值最终使得当前组件的元素才会有自定义的属性
4组件的注册
使用组件的注册使得整个Vue文件相对简单和条理
1普通组件的注册-局部注册 2普通组件的注册-全局注册 注册的时候组件名和组件对象是一样的可省略组件对象 参考
040-工程化开发和脚手架_哔哩哔哩_bilibili
