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

Posted 2021-01-17 lalalagq

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:projectmydemo>npm install

这个过程会很久。

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

3.运行项目

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

D:projectmydemo>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

项目运行流程