Vue.js 的使用

Vue2.0 新手完全填坑攻略——从环境搭建到发布
Vue.js的学习资源
Vue.js的官网

Vue.js 的优点：

1、就是文件很小100了，适合移动站点的开发，加载速度快2、国内有完整的中文文档，学习入门快，文档写的全并且好3、单页项目：页面中url发生跳转的时候，浏览器不会从新定向，而是ajax把数据异步加载，页面动态刷新，页面的结构不发生改变，也就是物理结构不变

Webpack 是什么

webpack就是一个资源打包工具，它可以将css/js/image/less/sass/vue等文件当做一个模块打包处理，最终将这些资源输出到一个统一的js文件中，将来在系统中只需要请求这个打包好的js文件即可完成所有的功能。vue.js 官网的一套脚手架中使用的webpack

webpack 1.13.3版本的文档

webpack 2.x 版本的文档

nodejs官网

npm资源网站

webpack 打包说明

• webpack 入口js文件 输出的js文件

例如：当前的main.js 为入口，通过cmd窗口webpack命令输出build.js

上面方法有点麻烦，简化方法使用配置文件

• 例如：
• 这个文件就是webpack的默认配置文件，默认的名称为： webpack.config.js
• 将来只需要在cmd面板上执行webpack就会自动去查找webpack.config,js中的内容进行相关的打包操作

代码如下：

// 这个文件就是webpack的默认配置文件，默认的名称为：  webpack.config.js//将来只需要在cmd面板上执行webpack就会自动去查找webpack.config,js中的内容进行相关的打包操作module.exports ={    entry:'./main.js', //webpack 要打包的源文件是main.js    output:{        filename:'./build.js', //打包以后输出的文件名称，./build.js 代表输出在当前目录下    } }

Webpack傻瓜式指南（一）
Webpack傻瓜指南（二）开发和部署技巧
Webpack傻瓜指南（三）和React配合开发

webpack.config.js文件详解
webpack.config.js文件详解2

创建Webpack简单项目遇见的那些事儿

按着教程写完index.js,sub.js，安装好各种包，然后在项目根目录运行webpack后，马上遇到一个坑

指令webpack安装的时候明明是全局的 “npm install -g webpack”，但是仍然报出了这样的错误 根据路径，ls查看webpack目录下是存在NodeTemplatePlugin这个插件的，查找了一下原因，应该是没有设置环境变量导致的。具体在这里
按照别人的方法：
1.直接在终端下，设置环境变量export NODE_PATH=”/usr/local/lib/node_modules” 后在项目根目录运行webpack，仍然报错。在项目根目录下输入指令 echo NODEPATH输出结果为空。2.在项目根目录下设置环境变量exportNODEPATH=”/usr/local/lib/nodemodules”后在项目根目录运行webpack，成功！在项目根目录下输入指令echoNODE_PATH 能输出结果。但是当新开一个终端进入项目，并在项目根目录下运行webpack指令，仍然报错，输入指令 echo $NODE_PATH 输出结果为空。说明之前设置的环境变量只是一个临时的值！ 以上两种方法都不可以很好的解决问题。

继续寻找解决方案： 在~/.bash_profile中添加如下设置： export NODE_PATH=”/usr/local/lib/node_modules” 保存退出。

运行webpack,成功！输入指令 echo $NODE_PATH 能输出结果！

ps：在终端下 vim ~/.bash_profile i #进入编辑
输入语句 export NODE_PATH=”/usr/local/lib/node_modules”
esc :wq
source ~/.bash_profile ＃让~/.bash_profile马上生效！

最终成功运行项目