框架和库的区别
库:自己来组装台式
框架:直接买品牌机
库:功能单一,比如jquery就是来操作节点,比如lodash就是用来操作基础类型,比如数组、对象、字符串、函数,因此一个项目是可以引入多个库的
框架:功能齐全,提供了一整套完整的解决方案,具有排他性,一个项目中一般只能引入一个框架,但是还可以搭配某些库
流行的三大框架
09年 google ---》 Angular
13年 facebook ---》react(难度比vue难一丢丢,适合中大型项目) 4
14年 尤雨溪负责人---》vue2 (门槛比较低,易学,用起来比较方便,适合中小型项目) 6
vue官网
百度 “vue.js”
vue特点
特点:渐进式:按需引入,vue框架只需要引入核心功能即可运行
核心思想
1 组件化 :vue是一个单页面应用,页面就是由一个一个的组件构成的
2 数据驱动 : 程序员只需要关注数据即可,数据一旦发生改变,则页面会自动渲染(一开始需要把数据和页面绑定好)
vscode推荐关于vue插件
1 vetur 能够使vscode、识别vue文件,会有语法的提示
2 AutoFileName 以后在vue中通过import 引入某个文件时会有地址的提示
3 Vue 3 Snippets v3、v2的语法提示
安装完毕后要重启软件
关于vue脚手架以及版本
脚手架:
前端开发中提bai到的“脚手架”是一个形象的比喻,比喻各类语言的前期工作环境。
在软件开发上(当然也包括前端开发)的脚手架指的就是:有人帮你把这个开发过程中要用到的工具、环境都配置好了,你就可以方便地直接开始做开发,专注你的业务,而不用再花时间去配置这个开发环境,这个开发环境就是脚手架。
比如vue.js就有个vue-cli脚手架,基于node.js的开发环境,作者帮你把开发环境大部分东西都配置好了,你把脚手架下载下来就可以直接开发了,不用再考虑搭建这些工具环境。
express-generator插件 就是 express 服务端框架的脚手架
vue-cli插件就会 vue前端框架的脚手架
如果没有脚手架:意味着从新建一个空空文件夹开始
安装vue脚手架:
vue-cli 脚手架依赖于node环境,保证电脑有node环境,可以通过 node -v 来查看版本
安装命令: npm i @vue/cli -g ---一般脚手架都需要全局安装,因为以后你每次新建项目都得用到脚手架
或者 npm i '@vue/cli' -g
查看脚手架版本:
vue -V
版本的区别:
如果脚手架的版本是4.5或以上,则该脚手架技能创建v2项目,又能创建v3项目
如果脚手架的版本是4.5以下,则该脚手架技只能创建v2项目
基于脚手架创建vue项目
1 vue create 项目名 --在当前位置下生产项目
2 选择类型
Default ([Vue 3] babel, eslint) -- 快速创建v3项目,拥有babel, eslint
Default ([Vue 2] babel, eslint) -- 快速创建v2项目,拥有babel, eslint
> Manually select features --自己去选择到底新建v2/v3,需要哪些插件自己来勾选
babel----》高级语法(es6)转成低级语法(es5) --->兼容浏览器
eslint----》规范代码
3 选择插件
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
4 选择vue版本,目前选择2.x
Choose a version of Vue.js that you want to start the project with
3.x
> 2.x
5 问你 Babel, ESLint, etc. 配置代码是合并到package.json还是独立出来 (无所谓)
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files---独立
In package.json--合并
6 问你是否保存这次操作用于下一次新建
Save this as a preset for future projects? (y/N) n
如果选择y会提示你输入自定义名字
开服(包含了打包) --开发阶段
在项目根目录下: npm run serve ---访问地址
打包项目到内存中
打包–准备上线
在项目根目录下: npm run build
注意:打包后需要以dist目录充当项目的根目录(重新打开vscode才行),然后通过live server 开服即可
package.json:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
npm run serve
npm run build 是根据以上两个自定义属性来的
vue项目结构
node_modules --下载好的插件
public
index.html --单页面,用来承载所有组件
src 源码
assets:存放图片的
components:存放组件(vue项目就是由一个一个组件组成的)
App.vue(入口组件-最大的组件,今后我们新建的其他组件都应该放在App.vue中)
main.js(入口js,首次访问时,程序会自动执行该文件)
.browserslistrc :处理兼容的配置文件,根据浏览器来处理代码
babel.config.js :关于babel配置
jsconfig.json : 编译的配置文件
"@/*": [
"src/*"
]
作用:以后可以在代码中通过书写@ 能够代表 进入src目录
package.json: 项目依赖了哪些插件
vue.config.js : 类似于 webpack.config.js,配置打包相关代码(比如今后的跨域等)
组件
一个完整的页面是由多个组件组合而成
组件: *.vue文件
组件内部组成:
1 <template>标签</template>
2 <style>样式</style>
3 <script>业务</script>
组件化:----》无非就是封装---->复用性
以前是封装方法(属于js),现在是封装组件(包含了html、js、css)
注意:
<template 中必须并且只能包含一个根节点(推荐写div)
App.vue是所有组件的父组件(入口组件),该组件一般不会真正的放布局,而是引入子组件,或者·写全局样式
组件的引入 components
1 自定义组件可以在src下任意位置新建 (默认推荐放在components下),文件名习惯大驼峰
2
<template>
<div id="app">
<!-- 使用组件 -->
<Demo1/>
</div>
</template>
<script>
//引入子组件
import Demo1 from './components/Demo1.vue'
export default {
//注册
components:{
Demo1
}
}
</script>
程序执行流程
首次访问---》程序自动执行main.js---->
//引入核心插件Vue(构造方法)
import Vue from 'vue'
//引入App.vue组件
import App from './App.vue'
//在控制台中关闭生产模式相关的警告
Vue.config.productionTip = false
//实例化一个Vue对象,执行了$mount()方法----渲染页面
//注意:#app就是index.html中的<div id="app"></div>
new Vue({
render: h => h(App),
}).$mount('#app')
数据绑定 data
vue的特色之一:数据驱动
指的是利用vue底层的响应式系统实现功能:只要数据发生了改变,则页面会自动重新渲染
只要我们把数据和视图提前绑定好后,程序员只需要关注数据的变化即可
区分bootstrap的响应式: 根据屏幕分辨率大小来动态展示数据
语法:
<template>
{{k}}
</template>
export default{
data(){
return {
k:数据,
....
}
}
}
注意:
1 {{}}是模板,只能放在标签体中,不能放在标签内部(属性)
2 {{}}类似于${},因此支持运算符、对象.属性/方法等、三元等
{{age>=18?'成年':'未成年'}}
{{age+1}}
{{arr.filter(item=>item>=2)}}