Vue进阶（一）：创建第一个vue工程并安装需要的组件

创建Vue工程

之前基础的是在页面的底部通过引入src的模式对vue进行编写，常用的是应用vue-cli进行编程。

什么是Vue-cli

vue-cli是官方提供的一个脚手架，在创建Maven时创建一个骨架项目，这个骨架项目就是脚手架，用于快速创建一个vue的项目模板

主要功能

1. 统一的目录结构
2. 本地部署
3. 热部署
4. 单元测试
5. 集成打包上线

准备环境

1. node.js
2. git
   点击链接安装即可

安装vue-cli

在命令行下运行以下代码：

npm install vue-cli -g
vue init webpack hellovue

选择默认项

安装所需要的依赖

npm install  

最后运行程序即可

npm run dev

访问localhost:8080端口就可查看创建的第一个vue程序.

需要的组件

webpack

概述：webpack本质上时一个现代JavaScript应用程序的静态打包器（module bundler）。当webpack处理应用程序时，它会递归的构建一个依赖关系图（dependency graph），其中包含应用程序所需要的所有模块，然后将这些模块打包成一个或多个bundle。
功能简介：webpack可以将许多松散耦合的模块依照依赖和规则打包成符合生产环境的前端资源，还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当作模块，比如CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript、LESS等。

安装webpack

在命令行输入下面的命令：

npm install webpack -g
npm install webpack-cli -g

基本语法

首先创建一个文件夹，存放所需的页面及代码。打开这个文件夹。

1. 创建webpack的配置文件

module.exports = {
    entry: "",
    output: {
        path: "",
        filename: ""
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: ""}
        ]
    },
    plugins: {},
    resolve: {},
    watch: true
}

2. 运行webpack运行即可。
3. 一般在创建工程时就运行了webpack，这种方法不经常用。