码迷,mamicode.com
首页 > Web开发 > 详细

Vue2+webpack+node 配置+入门+详解

时间:2018-11-02 23:44:47      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:模板   mount   dex   还需   ase   必须   efi   http   数据绑定   

Vue2介绍

1.vue2.0

Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。

  • Vue 的核心库只关注视图层
  • 采用单文件组件
  • 复杂大型单页应用程序(SPA)
  • 响应式的数据绑定,与组件化的开发
HTML中的DOM与其他的部分独立开来划分出一个层次,这个层次就叫做视图层

2.Webpack

Webpack是一个前端打包和构建工具。

webpack有四个核心概念:

  • 入口(entry)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。可以单个入口或多个入口
  • 输出(output)输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。
  • loader()loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块
  • 插件(plugins)插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务

打包:减少浏览器页面的请求,将图片/脚本代码/,打包成一个文件,只发起一次请求,将资源全部下载。

构建:babel转换,Sass,Less,stylus的CSS预处理器

3. node

通常情况下,JavaScript的运行环境都是浏览器,因此JavaScript的能力也就局限于浏览器能赋予它的权限了。比如说读写本地系统文件这种操作,一般情况下运行在浏览器中的JavaScript代码是没有这个操作权限的。

Node.js是一个服务端的JavaScript运行环境,通过Node.js可以实现用JavaScript写独立程序。即使你不用Node.js写独立程序,也得配一个Node.js运行环境,毕竟很多前端工具都是使用它写的。

4. npm

NPM是一个node.js的包管理器。

包的依赖关系一直是个很头疼的问题,如这个包的代码本身可能还调用了其他的包,那么我们使用时还需要其他的包,在自己的项目中引入这个依赖的包将变得十分困难。

NPM可以安装和管理包。

5.Vue-CLi

它是一个vue.js的脚手架工具。自动生成好项目目录,配置好Webpack,以及各种依赖包的工具

6. Vuex

Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。

7. Vue-route

Vue-route是vue的一个前端路由器,路由器是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换,让用户感觉就像切换到了网页一样。

8.Axios

Axios是一个基于promise的http库,可以用在浏览器和node.js中

  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 能转换请求和响应数据
  • 能取消请求
  • 自动转换JSON数据
  • 浏览器端支持防止CSRF(跨站请求伪造)
所以要学Vue需要学多少东西?
1.ECMAScript6的新增功能(promise构造函数,)
2.webpack的配置打包(项目中的配置文件)
3.ESLint配置(一个代码规范和错误检查工具)
4.bable配置(ES6和ES5转换器)
5.npm使用(包的安装与依赖)
6.Vuex(一个存储数据的状态管理器)
7.vue-Route(路由)
8.vue-cli(一键全家桶工具)
…………(html/css/js基本语法就不用多说了,宝宝心累……)

安装

实践出真知,干巴巴的读官方文档真是有苦难言。
宝宝直接一键全家桶后才开始慢慢去了解更多的……

开始使用前,请确保你有这些:

  • node.js
  • npm
  • vue
  • vue-cli
  • 代码编辑软件(宝宝一直用webstorm,当然也有其他的……)
不懂安装的请去别处搜索,有别的小姐姐小哥哥会告诉你的。

在cmd中查看是否安装,用的版本号是多少,输入命令,有提示说明安装了。(vue 的版本一定要用大写)

> node -v
v8.9.4
>vue -V
2.9.3
>npm -v
6.1.0

构建一个项目

1.创建项目

以上已安装好,请尽情的奔放……

打开cmd命令,进入你需要创建项目的目录下,比如:我要在d盘的project下创建一个名为mydemo的项目

D:\project>vue init webpack mydemo

之后一大串,项目名称,作者,是否build,是否使用代码规范等等一系列,宝宝是一直entry下去的。

然后它会提示三个命令:

cd mydemo  //进入你所在项目
npm install //安装依赖包
npm run dev //运行项目

2.安装依赖包

你的文件夹有以下基本文件夹:build,config,src,static。
生成的项目无法直接运行,不然会报错,项目本身依赖很多包模块,你需要安装。

打开cmd进入你的项目目录下:

D:\project\mydemo>npm install

这个过程会很久。

完成之后,项目下会多出一个node_modules文件夹,这就是我们项目所需的依赖包。

3.运行项目

打开cmd进入你的项目目录下:

D:\project\mydemo>npm run dev

会提示项目运行地址:http://localhost:8080

浏览器进入地址,你会看到vue图标,说明项目运行成功。

用cmd命令行很麻烦,如果编码软件支持,可以直接用编码软件直接打开终端运行,较为方便。

这个时候,我就去看官方文档去了,了解一下:

  • 构建一个Vue实例,实例的生命周期
  • 模板语法
  • 指令:v-if,v-show,v-for,v-bind,v-on,v-model
  • 数据的处理如何与指令或模板结合
  • class/style的绑定
  • 组件
  • 单页与多页
  • 路由
  • 组件注册,通信
官方文档还是不错的,受益颇多……

生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。

如下:创建前,创建结束,挂载前,挂载结束,更新前,更新结束,销毁前,销毁结束

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed
el: '#app',
data: {
  message: 'Vue的生命周期'
},
beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
      console.log("%c%s", "color:red","message: " + this.message) //undefined 
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 [object object]
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化 Vue的生命周期
    },
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化[object HTMLDivElement]
      console.log(this.$el);//<div id="app">...</div>
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  [object object]
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化  Vue的生命周期
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化[object HTMLDivElement]
      console.log(this.$el);    //<div id="app">...</div>
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 [object object]
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化  Vue的生命周期
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);   
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el); 
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message)
    }

created:初始化事件,进行数据监测,可见data已经有值,但el并没有变化。

beforemount:
判断实例是否有el节点,在创建实例时是否有挂载DOM节点,vm.$mount(‘#app‘),如若没有,生命周期结束,停止编译。
此时<div>{{message}}</div>并没有值

mounted:挂载完成后,data的message才会真正在视图中显示出文字。

deforeUpdata:data变化,重新渲染。

其他不会解释了,看其他文档,细嚼慢咽吧……

文档解说

配置文件

  • webpack.base.conf.js
    基础的环境配置,可以说是各个环境(包括开发环境,生产环境,测试环境)都需要的配置,公用配置部分。
    包含,编译入口,输出路径和命名规则,省略拓展名,配置很长的相对路径的别名,loader配置不同模块的处理规则
  • webpack.dev.conf.js
    webpack开发环境的核心配置文件,系统配置文件。
    当npm run dev时,运行的就是此文件。
    包含,插件
  • webpack.prod.conf.js
    webpack生产环境的核心配置文件,系统配置文件。
    当npm run build时,运行的就是此文件。
    包含,打包,
  • config/index.js
    全局配置文件。
    包含,,是否使用代码规范,项目入口,端口,服务器代理,
    前后台分离时必须部署配置此文件

diss文件夹

build后出现的打包文件夹

src

应当包含以下文件(单页为例)

  • assets//图片css
    css
    img
  • common //共用js和api
  • components //组件
  • router
    index.js //路由配置
  • app.vue //.vue入口
  • index.js //js入口,相当于(main.js)

package.json

用来管理本地安装 npm 包的唯一文件。它描述了当前项目依赖的包的列表,包含项目依赖包的版本,便于项目管理和移植

.gitignore

忽略文件

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/test/unit/coverage/
/test/e2e/reports/
selenium-debug.log
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

项目运行流程

Vue2+webpack+node 配置+入门+详解

标签:模板   mount   dex   还需   ase   必须   efi   http   数据绑定   

原文地址:https://www.cnblogs.com/lalalagq/p/9898466.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!