vue笔记，简介

1、安装node
# node -v
#npm -v
2、安装webpack
# npm install webpack -g
如果要使用webpack开发工具，要单独安装 webpack-dev-server
#npm install webpack-dev-server --save-dev
常用命令：
$ webpack --config webpack.min.js //另一份配置文件
$ webpack --display-error-details //显示异常信息
$ webpack --watch   //监听变动并自动打包
$ webpack -p    //压缩混淆脚本，这个非常非常重要！
$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了
3、安装vue脚手架
#npm install -g vue-cli
#vue -V   // 验证安装正确
4、用 vue-cli 构建一个项目
1)首先，我们进入准备放我们的项目的文件夹，以我本地为例，准备放在 ~/Site/MyWork 文件夹下面。我们执行下面的命令：
#cd ~/Sites/MyWork/
2) 跳转到我准备放项目的文件夹
#vue init webpack vue-demo //在此过程中，一般按回车默认即可
5、进入vue目录
#cd vue-demo
#npm run dev    //测试运行项目
我们已经顺利的安装了 nodejs 环境和 vue-cli 脚手架工具，并且利用脚手架工具生成了一个基于 webpack 的项目。
6、项目主干介绍
├── README.md                       // 项目说明文档
├── node_modules                    // 项目依赖包文件夹
├── build                           // 编译配置文件，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                          // 项目基本设置文件夹
│   ├── dev.env.js              // 开发配置文件
│   ├── index.js                    // 配置主文件
│   └── prod.env.js             // 编译配置文件
├── index.html                      // 项目入口文件
├── package-lock.json           // npm5 新增文件，优化性能
├── package.json                    // 项目依赖包配置文件
├── src                             // 我们的项目的源码编写文件
│   ├── App.vue                 // APP入口文件
│   ├── assets                      // 初始项目资源目录，回头删掉
│   │   └── logo.png
│   ├── components              // 组件目录
│   │   └── Hello.vue           // 测试组件，回头删除
│   ├── main.js                 // 主配置文件
│   └── router                      // 路由配置文件夹
│       └── index.js            // 路由配置文件
└── static                          // 资源放置目录
7、把src目录进行配置
├── App.vue                         // APP入口文件
├── api                             // 接口调用工具文件夹
│   └── index.js                    // 接口调用工具
├── components                      // 组件文件夹，目前为空
├── config                          // 项目配置文件夹
│   └── index.js                    // 项目配置文件
├── frame                           // 子路由文件夹
│   └── frame.vue                   // 默认子路由文件
├── main.js                         // 项目配置文件
├── page                                // 我们的页面组件文件夹
│   ├── content.vue             // 准备些 cnodejs 的内容页面
│   └── index.vue                   // 准备些 cnodejs 的列表页面
├── router                          // 路由配置文件夹
│   └── index.js                    // 路由配置文件
├── style                           // scss 样式存放目录
│   ├── base                        // 基础样式存放目录
│   │   ├── _base.scss          // 基础样式文件
│   │   ├── _color.scss     // 项目颜色配置变量文件
│   │   ├── _mixin.scss     // scss 混入文件
│   │   └── _reset.scss     // 浏览器初始化文件
│   ├── scss                        // 页面样式文件夹
│   │   ├── _content.scss       // 内容页面样式文件
│   │   └── _index.scss     // 列表样式文件
│   └── style.scss              // 主样式文件
└── utils                           // 常用工具文件夹
    └── index.js                    // 常用工具文件
8、配置static目录
├── css             // 放一些第三方的样式文件
├── font                // 放字体图标文件
├── image           // 放图片文件，如果是复杂项目，可以在这里面再分门别类
└── js              // 放一些第三方的JS文件，如 jquery
你可能很奇怪，我们不是把样式和 JS 都写到里面去么，为什么还要在这边放呢？
因为，如果是放在 src 目录里面，则每次打包的时候，都需要打包的。这会增加我们
的打包项目的时间长度。而且，一些地方放的文件，我们一般是不会去修改的，也没必
要 npm 安装，直接引用就好了。你可以根据自己的情况，对这些可以不进行打包而直
接引用的文件提炼出来，放在资源目录里面直接调用，这样会大大的提高我们的项目的
打包效率。
9、调整 App.vue 文件
10、我们使用了 scss 文件预编译，所以我们需要安装两个支持 scss 的 npm 包
#npm install sass-loader -D
#npm install node-sass -D
11、调整 index.vue 和 content.vue 文件，在里面进行添加内容
如：<template>
      <div>index page</div>
    </template>
12、配置router路由文件
13、vue 本身是不支持 ajax 接口请求的，所以我们需要安装一个
接口请求的 npm 包，来使我们的项目拥有这个功能。
#npm install axios
14、打包项目
我们进入到终端，并且进入到我们的开发目录
#cd ~/Site/MyWork/vue-demo-cnodejs
然后运行如下代码，进行打包：
#npm run build  //文件打包位置于项目目录里面的 dist 文件夹内。
15、去掉 map 文件
我们编辑 /config/index.js 文件，找到其中的  productionSourceMap: true,
改成productionSourceMap: false
然后重新运行： #npm run build
16、安装 http-server 启动 http 服务
我们进入 dist 文件夹，然后启动一个 http 服务，来看看可以不可以访问。
#npm install http-server -g  //安装http-server
#http-server  //启服务
我们的 http-server 安装到了 /usr/local/Cellar/node/7.6.0/bin/ 这个目
录下面，我们只要把这个目录，添加到环境变量即可。
echo 'export PATH="$PATH:/usr/local/Cellar/node/7.6.0/bin/"' >> ~/.bash_profile   // 追加环境变量
. ~/.bash_profile  //使我们的追加立即生效
17、服务跑起来
#cd dist
#http-server -p 3000
我们在浏览器中输入 http://127.0.0.1:3000 就应该可以访问了
18、我们开发的大多数项目，可能是必须跑在二级目录，甚至更深层次的目录的
我们编辑 config/index.js 文件，找到：assetsPublicPath: '/',把 '/' 修改为
你要放的子目录的路径就行了。这里，我要放到 /dist/ 目录下面。于是，我就把
这里修改为assetsPublicPath: '/dist/'
重新运行：
#npm run build
访问二级目录 /dist/ 我们就可以看到效果了