0x01 准备环境
1. 安装nvm（node与npm）
a. 按流程下载相对于版本的node即可，也会默认安装好对应版本的npm
2. 安装vue-cli
a. 查看当前node.js版本
node --version
b. 全局安装vue-cli（vue开发脚手架），i表示安装，-g表示全局
npm i -g vue-cli
安装指定版本，则如：
npm i -g vue-cli@x.x.x
PS：vue-cli3.x版本之后使用以下方式：
npm i -g @vue/cli@4.1.2
c. 查看vue版本：
vue --version
0x02 vue-cli入门例子
1. 初始化vue-cli
a. 在想要创建项目的路径下右键，选择“Git Bash Here”（需安装Git软件），然后初始化vue-cli：vue init webpack vue_sny
解释：
初始化一个基于webpack模板的项目，项目名为：vue_sny
b. 回车后会提示输入信息，括号里面的内容为默认的，回车则选中：
解释：
Project name (vue_sny)：项目名称，直接回车，选中括号中的默认名字（名字不能有大写字母，否则会报错） Project description (A Vue.js project)：项目描述，可直接点击回车 Author ()：作者，直接回车 Runtime + Compiler: recommended for most users 官方推荐，选中 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere ：直接选推荐的 Install vue-router? (Y/n) ：是否安装vue-router为官方的路由，这里可选可选可不选，要用到的话就要选Y。 Use ESLint to lint your code? (Y/n) ：是否使用ESLint管理代码，ESLint是代码风格管理工具，是用来统一代码风格的，一般会使用，如果觉得黄色的警告很难看，可以关掉，也可以安装完成后在配置文件里关掉。 Pick an ESLint preset (Use arrow keys) ：选择一个ESLint预设，编写vue项目时的代码风格，直接Y回车 Setup unit tests with Karma + Mocha? (Y/n) ：是否安装单元测试，这里可选可选可不选，要用到的话就要选Y。 Setup e2e tests with Nightwatch(Y/n)? ：是否安装e2e测试 ，这里可选可选可不选，要用到的话就要选Y。
c. 大概需要两分钟，屏幕上会出现三行代码指引：
To get started: cd vue_sny npm run dev
意思是进入到当前路径下的vue_sny目录，然后执行用npm执行项目，我们并没有创建vue_sny目录，为自动创建的，可以自己去路径下看一看是否真的存在。
2. 启动vue-cli项目
a. 执行并启动上面两条指令，提示项目的启动端口：
（可能会弹出提示，选“允许访问”）
b. 打开ip地址可看到启动的项目：
3. 项目结构介绍
a. 请参考官网，不同版本不一定相同
4. 简单配置介绍
a. 修改端口（vue_sny/config/index.js）
有时候我们后台项目也会默认使用8080端口，会跟我们前端端口冲突，所以我们可以修改端口成其他端口，打开浏览器时修改成其他端口访问即可，我这里使用8080。
ps：每次修改配置文件后要记得重新执行启动项目的指令才生效
npm run dev
5. 简单修改项目
a. 打开App.vue文件，将里面的内容删成：
<template> <div id="app"> <pre> 邵奈一: shaonaiyi@163.com wechat：shaonaiyi888 csdn：https://blog.csdn.net/shaock2018 </pre> </div> </template> <script> export default { name: 'App' } </script> <style> </style>
b. 打开端口，可看到相关信息：
localhost:8880
0x03 vue简单入门例子
1. 新建html页面
a. 新建一个项目或者在电脑任何路径下新建一个html文件，并编辑内容，这是脱离了上面安装的环境的。
b. 这里使用CDN的方式（https://www.bootcdn.cn/）引入vue
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
2. 编写代码
a. 编写csdn类，构建Vue类，绑定数据name
b. 完整代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script> </head> <body> <div class="csdn"> {{name}}的技术博客CSDN:https://blog.csdn.net/shaock2018 </div> <script> new Vue({ el: '.csdn', data: { name: '邵奈一' } }) </script> </body> </html>
3. 预览结果
a. 以浏览器方式打开，可看到{{name}}，其实是输入了shaonaiyi：
0xFF 总结
- 本教程主要介绍两个例子，通过对比学习，更有利于学习，其实我们vue-cli例子只是第二个例子的复杂实现而已。
- 重要的还是环境要搭建起来，虽然我们也可以使用cdn引入vue，但项目开发过程中，环境可让人事半功倍。
- 可以在config/index.js里把useEslint:设置为false，看着黄黄的警告信息不开心哈哈。
- 可以在谷歌浏览器里面安装Vue Devtools插件，这样子开发界面时保存会立即刷新，不用手动刷新，加快开发效率。
问题：打包后无法在项目里面预览
解决：修改打包后的路径（vue_sny/config/index.js）
assetsPublicPath: '/',
将‘/’前加个点：
assetsPublicPath: './',
如果不修改，打包后，外部引入的 js 和 css在本地无法打开的，因为路径没有映射上。当然，如果将打包后路径放到服务器上是没有问题的。
ps:请注意！！！本教程不修改，而是打包的时候再改！！！
