vue初识

原创已于 2023-10-04 23:23:13 修改 · 733 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-02-22 19:41:32 首次发布

本文介绍了渐进式JavaScript框架Vue的核心概念，包括声明式渲染和组件系统，以及如何通过Vue CLI脚手架创建项目。重点讲解了MVVM模型和关键特性，如数据绑定和Vue的实例化过程。同时，涵盖了库与框架的区别，以及如何配置Vue项目，如eslint和devServer设置。

概念：渐进式的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,
}
)