vue
vue.js
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
渐进式框架:Progressive,说明vue.js的轻量,是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js。
自底向上逐层应用:作为渐进式框架要实现的目标就是方便项目增量开发。
参考:https://cn.vuejs.org/v2/guide/
vue.js功能
-
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 比如:使用vue.js的插值表达式放在Dom的任意地方, 差值表达式的值将被渲染在Dom中。
-
条件与循环
dom中可以使用vue.js提供的v-if、v-for等标签,方便对数据进行判断、循环。
-
双向数据绑定
Vue 提供v-model 指令,它可以轻松实现Dom元素和数据对象之间双向绑定,即修改Dom元素中的值自动修改绑定的数据对象,修改数据对象的值自动修改Dom元素中的值。
-
处理用户输入
为了让用户和你的应用进行交互,我们可以用 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法。
-
组件化应用构建
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的目录下。
-
node.js的根目录中 创建出 npm_modules和npm_cache两个目录
npm_modules :npm的包管理目录
npm_cache:npm下载组件是产生的缓存数据目录
-
设置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下载组件的网上仓库地址,默认为国外服务器
-
先要下载nrm组件,通过nrm来修改cnpm的仓库地址
cnpm install -g nrm
-
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
-
设置cnpm的包管理目录和缓存数据目录
包管理目录
cnpm config set prefix "D:\nodejs\npm_modules"
缓存数据目录
cnpm config set cache "D:\nodejs\npm_cache"
使用
cnpm config ls
查询npm设置后的管理包路径(npm下载的依赖包所存放的路径) -
cnpm 安装webpack
分为本地安装和全局安装
本地安装
- 创建测试文件夹
- 进入测试文件夹,cmd
- 使用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