vue

vue

vue.js

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式框架：Progressive，说明vue.js的轻量，是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js。

自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发。

参考：https://cn.vuejs.org/v2/guide/

vue.js功能

1. 声明式渲染

   Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 比如：使用vue.js的插值表达式放在Dom的任意地方， 差值表达式的值将被渲染在Dom中。

2. 条件与循环

   dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环。

3. 双向数据绑定

   ​ Vue 提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素中的值自动修改绑定的数据对象，修改数据对象的值自动修改Dom元素中的值。

4. 处理用户输入

   为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法。

5. 组件化应用构建

   vue.js可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用。

webpack

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

webpack安装

1.安装nodejs webpack依赖于node.js，所以首先要按node.js

​2.使用国内包管理器 安装完node.js后，需要使用npm包管理工具安装webpack node.js自带npm，但是npm下载时链接的站点是国外的服务器，下载慢， 所以使用国内的包管理工具cnpm（淘宝）来安装。

​3.安装cnpm node.js中没有cnpm，需要使用npm来进行安装

​4.安装webpack 安装完cnpm后，使用cnpm安装webpack。

node.js

Node.js是一个Javascript运行环境(runtime environment)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js 不是一个 JavaScript 框架，不同于CakePHP、Django、Rails。Node.js 更不是浏览器端的库，不能与 jQuery、ExtJS 相提并论。Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。

node.js 安装

node.js的安装官方地址：https://nodejs.org/en/download/releases/

默认安装c盘, 可以改为D:\nodejs文件夹
完成后需要配置环境变量, path->新增 D:\nodejs\

测试安装

cmd---> node -v

安装cnpm

使用npm安装cnpm

npm

npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM的功能和服务端项目构建工具maven差不多，我们通过npm 可以很方便地下载js库，打包js文件

node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本

设置npm包路径

既然npm是对应用包的管理，一般情况下会将所有的应用包放到统一的目录下。npm默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules，为了方便对依赖包管理，我们将管理包的路径设置在单独的地方，本教程将安装目录设置在node.js的目录下。

1. node.js的根目录中 创建出 npm_modules和npm_cache两个目录

   npm_modules ：npm的包管理目录

   npm_cache：npm下载组件是产生的缓存数据目录

2. 设置npm的包管理目录和缓存数据目录

   npm config set prefix “D:\nodejs\npm_modules”

   npm config set cache “D:\nodejs\npm_cache”

使用 npm config ls 查询npm设置后的管理包路径（npm下载的依赖包所存放的路径）

npm 安装cnpm

• 输入命令,下载淘宝镜像

  npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装完毕后，还需要将D:\nodejs\npm_modules配置的环境变量path中

• 在新打开的cmd命名窗口中输入命名cnpm -v，查看cnpm是否安装成功

• 设置cnpm下载组件的网上仓库地址，默认为国外服务器

  1. 先要下载nrm组件，通过nrm来修改cnpm的仓库地址

     cnpm install -g nrm

  2. nrm来修改cnpm的仓库地址

     查看地址 nrm ls
     nrm报错 code: ‘ERR_INVALID_ARG_TYPE‘

       - C:\Users\liyin\AppData\Roaming\npm\node_modules\nrm\cli.js:17:20,找到17行
       - //const NRMRC = path.join(process.env.HOME, '.nrmrc'); (删除)
       - 替换成: const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');
     

     修改地址 nrm use taobao

  3. 设置cnpm的包管理目录和缓存数据目录

     包管理目录 cnpm config set prefix "D:\nodejs\npm_modules"

     缓存数据目录 cnpm config set cache "D:\nodejs\npm_cache"

  使用 cnpm config ls 查询npm设置后的管理包路径（npm下载的依赖包所存放的路径）

cnpm 安装webpack

分为本地安装和全局安装

本地安装

1. 创建测试文件夹
2. 进入测试文件夹,cmd
3. 使用cnpm下载webpack

cnpm install --save-dev webpack@3.6.0 测试的安装会在webpacktest01中创建npm_modules目录

全局安装 加 -g

使用cnpm全局安装webpack会安装到nodejs的npm_mudules目录中，制定webpack的版本进行下载
cnpm install webpack@3.6.0 -g