Vue项目预热

一、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.csdn.net/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里面对应的路由信息

 

四、单页应用VS多页应用

单页应用:只进行一次HTTP请求,每次切换并不是每次去加载一个班HTML,而是通过JS动态将当前页面内容删除掉,再对新页面的DOM结构进行渲染。

优点:页面切换快

缺点:首屏时间稍慢,SEO差

我们使用的vue是单页应用,在进行跳转时使用<router-link to="路径">aaaa</router-link>

多页面应用:每次页面跳转返回的都是一个HTML页面,每次都需要进行HTTP请求

优点:首屏时间快,SEO(搜索引擎)效果好

缺点:页面切换慢

 

 

发布了17 篇原创文章 · 获赞 9 · 访问量 3047
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览