vue 2.0完整项目搭建发布与结构分析

环境搭建到发布

基于node环境开发

  首先要安装node，window需要配置node环境变量（node版本尽量6以上）

安装webpack

  npm install webpack –g

安装vue脚手架

  npm install vue-cli -g

在硬盘上找一个文件夹放工程用的，在终端中进入该目录，根据模板创建项目

  vue init webpack-simple 工程名字<工程名字不能用中文>

runtime的两种方式， webpack使用loader编译文件。runtime+compiler运行时作编译，      runtime-only比较小，省略编译。需要基于.vue文件开发

接下来的可以根据需要是否装vue-router，eslint，单元测试等等；

安装完成后，会有相应get start的提示

初始化的设置

cd 命令进入创建的工程目录

 安装项目依赖（npm版本尽量3以上）

    npm install

启动项目

    npm run dev

（vue脚手架初始化vue代码只是vue开发的一种方式。但是比较推荐该方法建项目。因为可以初始化代码，初始化一整套webpack配置。比如npm run dev，npm run build。）

结构分析

build：打包

config：配置文件

dist：打包后的项目文件

node_modules: 依赖包

package.json: 依赖文件

pages: 放父组件

components：放子组件

router：路由文件，index.js里面写路由

app.vue：

main.js:

static:放静态资源

index.html：

单文件分析

Template：里 写 html

Script：里写 js

Style：里写样式，style标签标有scoped属性时，表明style里的css样式只适用于当前组件元素

Export default：exportdefault命令并不是在每个文件中都是必须的。它的作用只是用于导出模块，在别的模块需要调用这个模块的时候，可以通过import命令引入使用的。在app.vue中可以使用new Vue（{}）vue中创建根实例的方法。

Name：通过name，或者el挂载元素，所有的挂载元素会被 Vue 生成的 DOM 替换

Data：Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为getter/setter，从而让 data 的属性能够响应数据变化。

Methods：methods 将被混入到 Vue 实例中。可以直接通过 VM实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

Components：包含 Vue 实例可用组件的哈希表。

路由

组件通信