vue基本概念

zxp鹏
274 阅读3分钟

vue基本概念

vue介绍

  • Vue 是一套用于构建用户界面的渐进式javascript框架。

渐进式的概念

渐进式：逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue的全家桶来管理整个项目。

angular: 全家桶

image.png

Library

  • 代表：moment axios
  • 库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能 工具箱
  • 使用库的时候，把库当成工具使用，需要自己控制代码的执行逻辑。

Framework

  • 代表：vue、angular、react、bootstrap
  • 框架，是一套完整的解决方案
  • 使用框架的时候，框架实现了大部分的功能，我们只需要按照框架的规则写代码

库和框架的区别

  • 使用库的时候，很自由，只要调用库提供的各种各样的方法就行，也可以不用其他的一些方法
  • 使用框架的时候，需要按照框架的规则写代码，限制会非常多，但同时框架的功能也很强大，可以极大的提升开发的效率。

vue是 MVVM 的框架

  • MVVM思想：一种软件架构模式，决定了写代码的方式。

    • M：model数据模型(ajax获取到的数据)
    • V：view视图（页面）
    • VM：ViewModel 视图模型

  • MVVM通过数据双向绑定让数据自动地双向同步 不在需要操作DOM

    • V（修改视图） -> M（数据自动同步）
    • M（修改数据） -> V（视图自动同步）

image.png

  • 在vue中，不推荐直接手动操作DOM！

  • 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据!

image.png

开发vue的方式

开发vue有两种方式

  • 传统开发模式：基于html/css/js文件开发vue
  • 工程化开发方式：在webpack环境中开发vue，这是最推荐的方式。
  • 现代化的项目也都是在webpack环境下进行开发的。

vue-cli的使用

vue-cli也叫vue脚手架,vue-cli是vue官方提供的一个全局命令工具，这个命令可以帮助我们快速的创建一个vue项目的基础架子。

基本使用

  • 全局安装命令
npm install -g @vue/cli
yarn global add @vue/cli
  • 查看版本vue
vue --version
vue --V
  • 初始化一个vue项目
vue create 项目名(不能用中文)
  • 启动项目
yarn serve
yarn build

如何覆盖webpack配置

注意：我们在项目无法找到webpack.config.js文件，因为vue把它隐藏。

如果需要覆盖webpack的配置，可以修改vue.config.js文件，覆盖webpack配置文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 配置端口号
  devServer: {
    port:3000,  // 设置端口号,
    open:true,  // 自动打开浏览器
    host:'127.0.0.1' / 'localhost'  // 设置IP地址
    #配置号新的端口号要重新启动项目
  }
})

目录分析与清理

image.png

  • public/index.html不用动，提供一个最基础的页面
  • src/main.js不用动， 渲染了App.vue组件
  • src/App.vue默认有很多的内容，可以全部删除
<template>
  <div>123</div>
</template>
  • assets文件夹与components直接删除

vue项目各个文件作用

vue-code项目名称(不固定)
node_modules项目依赖的第三方包
public静态文件目录
favicon.ico浏览器小图标
index.html单页面html文件(网页浏览的)
src业务文件夹
assets静态资源
logo.pngvue的logo
components组件目录
App.vue整个应用的根组件
main.jsvue页面入口
.gttignoregit提交的忽略配置
babel.config.jsbabel配置,兼容低版本,降级
package.json依赖包列表文件
README.md项目说明
yarn.lock项目包版本和缓存地址

vue单文件组件的说明

一个.vue文件就是一个组件,后续开发vue，所有的功能都是基于组件实现。

安装插件

image.png

一个单文件组件由三部分构成

  • template(必须) 影响组件渲染的结构 html

    • 只能有一个根元素

  • script 逻辑 js

  • style 样式 css less scss

    • style用于提供组件的样式，默认只能用css
    • 可以通过lang="less"开启less的功能，需要安装依赖包
yarn add less-loader@7.2.1 less -D
avatar
文章
阅读
粉丝