概念:渐进式的js框架,一套拥有自己规则的语法。(渐进式:vue的功能是“独立”的,想用哪种用哪种,不必全用。大致分为:只使用vuejs的【声明式渲染,组件系统】,和使用vuejs加其他插件的【vuex,vuerouter,vite,webpack等】)
库和框架的区别:库是方法的集合,可以更换。
而框架是一套拥有自己规则的语法,功能更强大,不能更换。
核心特性:MVVM
表示的是 Model-View-ViewModel
- Model:模型层,负责处理业务逻辑以及和服务器端进行交互
- View:视图层:负责将数据模型转化为UI展示出来,可以简单的理解为HTML页面
- ViewModel:视图模型层,用来连接Model和View,是Model和View之间的通信桥梁
直接引入vuejs
vue2: https://v2.cn.vuejs.org/v2/guide/installation.html
//1.创建容器 vue管理的范围
<div id="app">
{{txt}}
</div>
//2.引入vuejs 有开发版本和生产版本,注意选择
//可以把vuejs下载下来使用,也可以在线引用
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
//3.创建实例
<script>
//引入vuejs后,就有了vue构造函数
const app = new Vue({
// 通过选择器,指定vue的作用范围
el: "#app",
// 提供数据
data: {
txt: "这是一段话"
}
})
</script>
vuecli脚手架
是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建
脚手架
项目。
脚手架
是为了保证各施工过程顺利进行而搭设的工作平台。
安装
两种安装方式,
yarn global add @vue/cli
npm i -g @vue/cli
vue -V 查看版本号,确认是否安装成功。
创建vue项目
vue create 起一个文件夹的名字
选择vue2
加载完毕后,有提示
cd 上面创建的文件夹 切换目录
选择yarn serve运行
运行成功后,会出现URL地址,复制地址到浏览器。
简单配置
vue.config.js文件里
eslint是一种代码检查的工具,不合规则会报错,前期先关闭
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
//配置端口
devServer: {
port: 3000,
open: true
},
//不写的话会变成“严格模式”,关闭eslint.
lintOnSave: false,
}
)