vue-webpack工程搭建

第一步：前提条件

• –node是必须安装好的，不会的同学请移步node安装
• –git for windows也是必须先安装的
• –npm装逼神器也是需要先安装的，npm安装 查看本地是否成功安装node和npm(建议使用git for window)

  $ node -v
  
  $ npm -v

第二步：安装vue-cli工具

说白了就是安装好 vue这个指令工具，其他作用我们暂时不管

$ npm install -g vue-cli  #等待时间可能会长一些

第三步：生成vue-webpack模板

vue官方提供了两种webpack模板，分别是vue-webpack-simple和vue-webpack

Webpack简介

Webpack是当下最热门的前端资源模块化管理和打包工具，
它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，
还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。通过 loader 的转换，
任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

vue-webpack模板生成

$ vue init vue-webpack webpack #等待时间较长

vue-webpack依赖加入(进入项目)

$ npm install

如图

最终生成的目录结构为

运行指令如下，浏览器自动打开http://localhost:8080/#/

$ npm run dev

运行成功标志

第四步：生成vue-webpack-simple模板

与生成vue-webpack模板类似操作

$ vue init webpack-simple 项目名称  #等待

此时生成的模板结构
加入依赖

$ npm install

之后项目会多出一个node_modules,如图

运行示例

$ npm run dev

发布示例

$ npm run build

更多知识请自行百度