VUE的安装

一、下载
https://cn.vuejs.org/v2/guide/installation.html
开发版本：vue.js
生产版本：vue.min.js


二、安装vue
(1).npm install vue
三、全局安装vue-devtools
(1)登陆:https://github.com/vuejs/vue-devtools#vue-devtools
(2)Installation
点击链接安装:Get the Chrome Extension
点击链接安装:Get the Firefox Addon
点击链接安装:Get standalone Electron app (works with any environment!)
(3)或使用命令安装
全局安装web-ext:npm install --global web-ext
1.到github下载：
git clone https://github.com/vuejs/vue-devtools
2.在vue-devtools目录下安装依赖包
cd vue-devtools
cnpm install
3.修改\vue-devtools\shells\chromemanifest.json文件，把"persistent":false改成true
4.编译代码
npm run build
5.扩展Chrome插件，或firefox插件
6. vue-devtools使用
vue项目, 打开f12, 选择vue就可以使用了.
vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试
温情提示: 
1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的
2.安装后, 需要关闭浏览器, 再重新打开, 才能使用




四、安装命令行工具 (CLI)
(1)全局安装 vue-cli
npm install --global vue-cli
(2)查看VUE命令用法
vue
(3)查看vue建立项目的模板,模板有：browserify,browserify-simple,pwa,simple,webpack,webpack-simple
vue list
(4)按照模板创建新项目
建立基于webpack模板的完整项目
vue init webpack my-webpack
建立基于webpack-simple模板的简单项目
vue init webpack-simple my-webpack-simple
建立基于browserify模板的完整项目
vue init browserify my-browserify
建立基于browserify-simple模板的简单项目
vue init browserify-simple my-browserify-simple
建立基于pwa模板的项目
vue init pwa my-pwa
建立基于simple模板的项目
vue init simple my-simple
(5)目录结构解释
├─.babelrc //babel配置文件，.babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。
├─.gitignore
├─index.html // 主页
├─package.json // 项目配置文件，文件内容中的dependencies：项目发布时的依赖，devDependencies：项目开发时的依赖，scripts：编译项目的一些命令
├─README.md  
├─dist // 发布目录
│   ├─.gitkeep       
├─src // 开发目录
│   ├─App.vue // App.vue组件
│   ├─main.js // 预编译入口


五、启动VUE
(1)进入项目目录
cd my-project
(2)安装依赖,安装完成后，目录下会产生一个node_modules文件夹。
npm install
(2)启动VUE
启动开发模式，在执行该命令后，dist目录下会生成一个build.js文件。
npm run dev
启动生产发布模式
npm run build
启动生产发布模式并查看包分析器报告
npm run build --report
启动eslint的测试
npm run eslint
启动karma的单元测试(具体测试内容，要去看karma.conf.js)
npm run unit
启动end to end的端到端测试
npm run e2e
启动karma的单元测试和端到端测试都执行
npm run test
(3)前台浏览
打开127.0.0.1:8080


另：eslin的安装
安装npm依赖
//全局安装eslint
npm i eslint -g


//如果用到html中的js校验
npm i eslint-plugin-html -g


//如果用到es2015语法
npm i babel-eslint -g




六、启用VUE的详细执行命令：
1、开发时生成build.js：
在package.json文件的scripts节点下，有3行配置：


"scripts": {
  "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
  "serve": "http-server -c 1 -a localhost",
  "dev": "npm-run-all --parallel watchify serve"
}
npm run dev命令执行的是dev节点对应的命令npm-run-all --parallel watchify serve ，这行命令是依赖于watchify的，也就是下面这行命令：


watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js
你不用纠结这行命令的每个参数是什么意思，只需要理解src/main.js –o dist/build.js的含义：


编译src/main.js文件，然后输出到dist/build.js
serve节点的命令http-server -c 1 -a localhost用于开启http-server，http-server是一个简易的web服务器。


2.生产发布时生成build.js：


在理解了上述编译过程后，发布时build.js就不难理解了。


"build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
执行npm run build命令可以生成发布时的build.js。


七、引用
尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。