vue从0开始笔记
开篇日常立个flag....
前置知识
node 先了解，npm 的命令要会用， webpack 和 vue 的知识要掌握
1、node、npm、webpack 介绍
node 即 node.js，运行在服务端的 JavaScript node官方文档传送门
npm 是 node 的包管理工具，用来安装各种包（比如 webpack、vue） npm官方文档传送门
webpack 依赖于 node，是用来编译打包的工具，简单理解：一堆文件压成更少的几个或一个（webpack 是 node 的一个模块？） webpack官方文档传送门
webpack-cli 这个是 webpack4.0 以后，从 webpack 分离的？
2、vue 介绍
vue 是一套前端框架，区别于 Jquery 对 DOM 元素的操作，vue 只关心数据。 vue官方文档传送门
前置条件：环境部署
1、安装 node.js ：官网直接下载 https://nodejs.org/zh-cn/download/
2、切换 node.js 镜像（可不切）： 切淘宝镜像
npm get registry %查看当前镜像地址%
npm config set registry http://registry.npm.taobao.org/ %切换成淘宝的镜像%
npm config set registry https://registry.npmjs.org/ %切回原来的镜像%
npm install -g cnpm --registry=https://registry.npm.taobao.org %安装 淘宝镜像源 cnpm%
其中：cnpm 是 npm 的一个插件，cnpm 用法和 npm 用法一致，只是执行命令的时候将 npm 改为 cnpm。这样做的意义是：国内 npm 速度可能不行，cnpm 服务器在国内（淘宝团队）速度可能会好点。
3、安装 webpack 模块：
npm install -g webpack %带上 -g 为全局安装，下同%
npm install -g webpack webpack-cli
4、安装 vue 模块：
npm install -g vue
npm install -g vue-cli
开发工具
IDE用VS Code，插件用 vue-helper
chrome 插件下个 vue-devtools （方便vue调试）安装传送门
创建项目
1、指定 project 位置
在文件路径里敲入 cmd 直接打开 命令窗口
2、用 vue-cli 构建项目
vue init webpack xxxx （xxxx 为自定义项目名称）
输入命令后，会有如下选项要填：
Project name： xxxx ---- 项目名称，直接回车默认上一句命令输入的 xxxx（不能由大写字母，会报错）
Project description：
Author：
Vue build：
Runtime + Compiler 运行+编译（默认推荐）
Runtime-only
Install vue-router? ---- 官方路由，回车默认安装
Use ESLint to lint your code? ---- 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
Pick an ESLint preset ---- 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
Setup e2e tests with Nightwatch? ---- 是否安装e2e测试，默认安装
项目结构
搬砖过程
项目建立起来，就是往里面加东西了。
此处省略一万个字....
编译运行
启动项目
npm run dev
这个命令，会获取 /config/index.js 里面的配置，然后运行项目
编译打包
npm run build
打包完成后，会生成 dist 文件夹，项目部署上线只需要这个文件夹。
参考来源：
https://www.cnblogs.com/chenhuichao/p/11039427.html （____chen 的 vue调试工具vue-devtools安装及使用（亲测有效，望采纳））
https://www.cnblogs.com/wangzxblog/p/12532620.html （重设代码的天空 的 vue学习笔记前置篇）
https://www.cnblogs.com/yanggb/p/10822420.html （彩虹の你 的 npm与cnpm的区别）
https://www.cnblogs.com/fengzhenxiong/p/10213198.html （回眸 的 vue-cli（vue脚手架）详细教程）
