vue+webpack学习之路（入门）

一. 安装nodejs，这个网上已经有很多教程就不多说了，按照默认配置安装以后node里会自带npm包管理工具

（1）安装npm淘宝镜像（可以在某些命令下用cnpm替代npm，下载安装的速度更快）
npm install -g cnpm --registry=https://registry.npm.taobao.org

（2） facebook开源出新的包管理工具，yarn，亲测比npm好用许多，给个传送门，大家可以去看看，另外贴一个yarn与npm命令行的比较帖

二. 全局安装vue脚手架和webpack
npm install vue-cli webpack -g

三. 使用vue-cli脚手架工具初始化项目
vue init webpack xxx（项目名称）

四. 填写完项目名称，描述，作者，模板编译，eslint配置（标准），单元测试的需求以后进入项目文件夹
cd xxx（项目名称）

五. 安装npm包的依赖（vue-cli会默认配置package.json，其中dependencies对应的依赖列表会被webpack打包到生产环境，而devDependencies对应的依赖立标只是在开发环境时会被引用，不会运用到生产环境。另外，如果有需要添加额外的依赖时，--save代表添加依赖到package.json文件中dependencies的依赖列表下，而--save-dev则是添加依赖到devDependencies下）
npm install/yarn install/yarn（根据当前文件夹下的package.json来下载安装对应的依赖）

六. 测试以上步骤是否生效，成功则能在浏览器看到vue的测试首页
npm run dev/yarn run dev（开发环境下webpack调用一个自带的express服务器展示你的代码）

七. 添加less依赖,从而可以直接在.vue文件中写less代码（需要给style加上lang="less"属性）
npm install less less-loader --save-dev/yarn add less less-loader --dev

<style lang="less" scoped>
body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
}
</style>

八. 给项目添加一个可以发起http请求的插件
（1）添加vue-resource依赖（这里使用--save安装，是因为生产环境也还是需要使用到vue-resource）
安装vue-resource：npm install vue-resource --save/yarn add vue-resource
（2）这里也可以使用vux这个框架，框架也集成了ajax功能，使用方法和vue-resource一样，目前来看个人感觉vux会比饿了么的mint-ui好用一些，这里有一点要提醒的是，如果使用了vux的话，记得一定要配合vux-loader使用，不然程序会报错
安装vux：npm install vux --save/yarn add vux
安装vux-loader：npm install vux-loader --save-dev/yarn add vux --dev

九. 配置webstorm下对vue模板的支持
File - Settings - Plugins - Browse repositories - vue.js（install）- 重启webstorm - File and Code Templates - 设置新建vue文件的模板（模板设置例子如下）

/**
 * Created by xxx on ${DATE}.
 */
 <template>
   <section class="">
   </section>
 </template>
 
 <script>
  export default {
  }
 </script>
 
 <style lang="less" scoped>
 </style>

vue+webpack学习之路（入门）

推荐阅读更多精彩内容