Vue学习笔记之vue/cli搭建项目、目录结构及工作原理

最新推荐文章于 2024-04-29 03:49:58 发布

bfbshs_ddd

最新推荐文章于 2024-04-29 03:49:58 发布

阅读量120

点赞数

分类专栏：前端学习文章标签： vue.js 笔记前端 webstorm

本文链接：https://blog.csdn.net/bfbshs_ddd/article/details/134464596

版权

前端学习专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

第一章 vue基础
- 1.vue简介
第二章 vue/cli
第三章 vue工作原理

第一章 vue基础

1.vue简介

概念：一套用于构建用户界面的渐进式JavaScript框架，可以自底向上逐层应用，简单应用只需一个轻量小巧的核心库，复杂应用可以引入各式各样的vue插件
特点：
- 核心1采用组件化模式，提高代码复用率，让代码更好维护。一个.vue文件就是一个组件，它封装一部分网页内容功能（视图按照功能切分成若干单元），写的内容包括HTML+CSS+JavaScript，通过引用vue文件直接获得写好的功能。组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试
- 核心2响应式数据绑定：当数据发生改变，视图可以自动更新，可以不用关心DOM操作专心数据操作
- 声明式编码，无需直接操作DOM，提高开发效率
- 使用虚拟DOM+Diff算法，尽量复用DOM节点，只更新改变的节点

第二章 vue/cli

2.1 简介

Vue/CLI(Command Line Interface)是Vue官方提供的脚手架工具
默认搭建好了一套利用Webpack管理vue的项目结构
vue-cli 适用于vue2 ，配置文件过多，约等于自己用Webpack搭建；vue/cli 适用于vue3 ，提倡零配置

2.2 脚手架安装与项目搭建初体验

全局安装npm i @vue/cli -g
可以更换镜像npm config set registry https://registry.npm.taobao.org
检查安装版本：vue -V或vue --version
创建项目：vue create projectname注意名称projectname不能包含大写字母，随后选择vue版本，也可以选择手动

选择手动后
- Babel用于格式转换，例如ES6转换为ES5，现在很少使用
- 选择CSS预处理器（SASS LESS）
- eslint语法检查，纠正代码格式不规范之处，初学阶段暂时不选
- Unit Testing单元测试
- E2E Testing端对端测试
设置配置文件为单独文件

保存预设（下次创建项目可以直接使用该预设）

创建完成

2.3 目录结构

在这里插入图片描述

2.3.1 配置文件

一般情况下不需要做任何操作

package.jsonnpm初始化情况：项目名称、项目版本、脚本服务/打包"scripts":{"serve":"","build":""}、上下运行环境"dependencies"、开发环境"devDependencies"

上下运行环境是vue，说明打包后包里含有vue源码

npm run serve
package-lock.json锁文件，它的存在使我们可以恢复删除build出的包和node-modules
README.md软件说明
jsconfig.jsonjs配置文件
gitignore说明git上传时忽略的文件
.browserslistrc转换时提供的格式，告诉我们打包时让CSS支持哪些浏览器
自定义配置文件例如vue.config.js不会打包到项目中，服务器端运行脚手架读取，node“找”该配置文件，故需要用commonJS导出模块。可以在这里导入webpack，进行webpack配置，比如给打包的文件加上banner

2.3.2 node_modules目录

安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。

2.3.3 public目录

该目录下的文件会原封不动打进包

favicon.ico浏览器上标题旁的小图标
index.html

2.3.4 src目录*

做项目主要操作该目录，该目录下可以自己创建新目录。

assets目录用来存放资源如全局CSS、图片images、字体库font
components目录存放组件，页面上的一个功能都可能是一个组件，组件可以嵌套组件，在目录内建立层次关系即可
- views目录放页面级的组件

第三章 vue工作原理

3.1 项目建立

public目录下建index.html <body>标签内添加盒子<div id="app">，需要用vue创建的模板代码都会用程序放入<div id="app"></div>（单页面不涉及路由：只放入根组件如App.vue，它会层层嵌套其他子组件）

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>study vue</title>
</head>
<body>
    <div id="app"></div>

</body>
</html>

src目录里创建根组件，src->components内创建子组件

创建组件（.vue文件）会默认建立三块结构<template></template> <script></script> <style></style>，打包时会分别被提出成独立文件
- <template></template> 模板写html创元素，最好将所有内容写在一个<div></div>中，模板中可以使用插值语法{{数据名}}显示数据，还可以直接用导入组件的组件名创建成自定义标签元素
- <script></script>写js 加特效
  - export default{}导出一个缺省的json，相当于配置整个页面的配置文件，用于导出组件选项对象，包括组件的数据（通常为data）、计算属性、方法、生命周期钩子等。其中可以定义方法setup(){}来组合API
  - import xxx from "路径" 语句：用于导入组件所需的依赖项，例如其他组件、插件、工具库等。若导入组件还需要在export default{}中添加components:{组件名}
- <style></style>写CSS 设样式
```
<template>
  <div class="home">
    this is app template
    <br>
    {{mess}}
    <button @click="one()">print1</button>
    <button @click="two()">print2</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      mess:"this is a app demo"
    }
  },
  methods:{
    one(){
      console.log('111')
    },
    two(){
      console.log(this.mess)
    }
  }
}
</script>
<style>
  .home{
    width: 300px;
    height: 300px;
    background: #42b983;
  }

</style>
```
src目录里创建main.js文件也就是主入口文件，打包时先找main.js，它使得根组件内容放入index.html，相当于webpack里定义的entry:'./src/main.js'
- import {createApp} from 'vue';导入vue中createApp方法
- import app from "./App.vue";导入组件app
- createApp(app).mount('#app');用vue中createApp方法创建组件挂载到index.html中id为app标签中
```
import {createApp} from 'vue';

import app from "./App.vue";

createApp(app).mount('#app');
```

3.2 options基础定义

Vue实例主要封装视图操作，包括：
- 数据读写
- 事件绑定
- DOM更新
options是vue实例参数，是一个可以包含各种选项属性的对象，共有五大类属性
- 数据：data、props、propsData、computed、methods、watch
- DOM：el、template、render、renderError
- 生命周期钩子：beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、activated/deactivated、beforeDestroy/destroyed、errorCaptured
- 资源：directives、filters、components
- 组合：parent、mixins、extends、provide、inject

新建一个Vue实例

法一 new一个

var app = new Vue({
    el:'#app',//挂载元素
    data:{
        name:'ddd'
    },//.vue组件中data是一个函数，写成data(){}
    methods:{
        f:function(i){
            console.log(i)
        }
    }
})
export default app //默认输出，可在其他组件引用

法二直写

export default{
    name:'',
    components:{},
    data:(){},//data函数成员
    watch:(){},//watch监听成员
    computed:{},//computed计算成员
    created: function(){},
    methods:{},//methods对象成员
    actions:{}    
}

3.3 MVVM模式

MVVM是一种软件架构模式，实现页面操作时改变数据，数据改变时改变页面。

Model-数据模型，也就是.vue文件中<script>内export default{}部分
View-UI视图，也就是.vue文件中模板部分
ViewModel-View和Model之间的桥梁视图模型，可以是Vue对象，它完成双向绑定
- DOMListenersDOM监听View上DOM的改变从而让Model做出相应改变
- Data Bindings数据绑定将Model中的改变响应给View

bfbshs_ddd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue学习笔记之vue/cli搭建项目、目录结构及工作原理

vue是一套用于构建用户界面的渐进式JavaScript框架，可以自底向上逐层应用，简单应用只需一个轻量小巧的核心库，复杂应用可以引入各式各样的vue插件。现在已经更新到vue3
复制链接

扫一扫