Vue项目预热

最新推荐文章于 2022-06-11 17:58:39 发布

henulqr

最新推荐文章于 2022-06-11 17:58:39 发布

阅读量337

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_42097814/article/details/103983676

版权

一、Vue概述

1.什么是Vue

vue是一个轻量级前端界面框架，是一个轻巧、高性能、可组件化MVVM库，同时拥有非常容易上手的API。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。

vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

2.MVVM框架---Vue.js

MVC:

Model(模型)+View(视图)+controller(控制器)，主要是基于分层的目的，让彼此的职责分开。 View通过Controller来和Model联系，Controller是View和Model的协调者，View和Model不直接联系，基本联系都是单向的。用户User通过控制器Controller来操作模板Model从而达到视图View的变化。
原文链接：https://blog.youkuaiyun.com/qq_16546829/article/details/81629110

MVP:

是从MVC模式演变而来的，所谓的p就是cp结合，都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。在MVP中，Presenter完全把View和Model进行了分离，主要的程序逻辑在Presenter里实现。并且，Presenter和View是没有直接关联的，是通过定义好的接口进行交互，从而使得在变更View的时候可以保持Presenter不变。

MVVM:

MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。 ** View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。** 这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。MVVM模式的框架有：AngularJS+Vue.js和Knockout+Ember.js后两种知名度较低以及是早起的框架模式。

二、配置Vue 项目

Vue官方提供了一个CLI脚手架工具，小型项目一般直接引用vue.js ,但是在大型项目中需要通过webpack打包工具来构建我们的项目。

命令行工具（CLI）

Vue提供一个官方命令行工具，可用于快熟搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需要几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。、

//全局安装 vue-cli
$ npm install --global vue-cli
//构建一个基于webpack模板的新项目
$ vue init webpack my-project 
//安装依赖
cd my-project
npm install
npm run dev

打开浏览器访问 http://localhost:808出现下图，安装成功！

三、通过vue-cli脚手架工具创建的vue项目

1.README.md 项目说明文件

2.package.json 说明第三方依赖包

3.package-lock.json 是package的一个锁文件，可以保证你安装的第三方依赖包的版本，方便团队编程统一

4.LICENSE 是一个开源协议的说明

5. index.html 项目默认的首页模板

6.postcssrc.js 对postcssrc的一个配置项

7.gitignore 当我们使用git的时候希望把我们的代码上传到线上，但是有一些文件我们不想上传到线上，就可以把不想上传的文件配置到gitignore文件中，这些文档当我去提交到git仓库中是不会被提交上去的

8.eslintrc.js 对我们的代码进行检测，看看是否符合书写标准，需按照规范书写代码才不会出错

8.eslintignore 在该配置下的文件代码书写不规范不会受到检测错误的提示

9.editorconfig 编辑器中的一些规范

indent_size = 2我们点击Tab键时，其实是2个空格的缩进

10.babelrc 我们写的代码其实是Vue单文件组件的写法，所以需要通过babe这种语法解析器做一些语法上的转换，最终转换成浏览器能够编译执行的代码。需要引入babe这个内容，babel做一些额外配置的时候都需要放在babelrc这个文件下

11.static目录下放的是我们的一些静态资源（例如:图片、json模拟数据）

12.node_modules 放置的我们这个项目依赖的第三方依赖包

13.src目录下放的是我们整个项目的源代码

main.js 是我们整个项目的入口文件

App.vue 是我们项目最原始的那个根组件

router/index.js 项目里所有的路由都放置到router下面的index.js里面

components 下面放置的我们项目需要用到的一些小组件

assets 放置的项目需要用的图片资源

14.config目录下的文件（都是一些配置文件）

index.js 基础的配置信息

dev.env.js 开发环境的一些配置信息

prod.env.js 线上环境的配置信息

15.build目录下的文件项目webpack打包的一些配置内容

webpack.base.conf.js webpack基础打包配置信息

webpack.dev.conf.js webpack开发环境配置信息

webpack.prod.conf.js webpack线上环境的配置信息

其他的一些配置信息都是vue-cli自动为我们生成的，开发过程中不需要修改

四、单文件组件与vue中的路由

src中存放项目的源代码，打开main.js（整个项目的入口文件）

1.Vue根实例

在入口文件中定义了一个名字叫Vue的根实例，

el:'#app' : 指该根实例挂载到id='#app'的元素上,在index.html中可以找到挂载的这个元素。

components: {App} :定义了一种局部组件的使用，是一种ES6的写法（相当于 {App:App} ）项目里有一个局部组件叫App然后再外层的Vue实例也叫App

template：模板，把App这个局部组件给渲染出来

App这个组件是从import App from './App'导入进来，webpack会自动查找以App命名的文件名的所有不同后缀的名称（App.vue

App.js App.json等）

2.组件的定义

App.vue

//vue组件的写法
vue.component('abc',{

})

//当使用单文件组件是使用下面这种方法
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
//template定义模板  script定义逻辑 style定义样式

3.路由

App.vue中<router-view>显示当前路由地址对应的内容，对应的内容在main.js中引入了import router from './router'

引入了index.js下面的路由配置项

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})


//当访问跟目录时，显示HelloWorld这个组件，上面需要写引入'@/components/HelloWorld' @代表src这个目录

只有App.vue中写入<router-view>才会进行路由选择，展示index.js里面对应的路由信息