一、基础环境搭建
1、搭建好基础运行时环境：Node.js
可以参考菜鸟教程的《Node.js安装配置》
（1）去Node.js官网下载对应的安装包，windows下载msi比较方便。
一步步安装就能完成了。如果发现有任何问题，直接采用bin安装的方式，下载bin二进制，然后直接类似安装java一样配置环境变量即可。
现在的node.js已经会顺带安装超火的包管理器npm（Node Package Manager）了，然后查看版本号，验证它们是否安装成功：
node --version
npm -v
（2）永久使用淘宝镜像源
# 永久配置，会写入配置文件
npm config set registry https://registry.npm.taobao.org
# 查看当前仓库地址
npm config get registry2、认识webpack
webpack用于打包，可以将一些高级语法编写的文件按一定规范去编译成标准HTML、JS、CSS。
webpack安装后会生成node_modules目录，里面包含了各种插件的代码。同时包含如下功能模块:
1、devtool：动态修改代码后能够实时显示在页面上，不用重启服务器
2、webpack-dev-server：node.js实现的web服务器，用于前端调试或者前后端分离
3、loaders：高级语法解析器，例如SCSS转css
4、babel：兼容语法编辑
5、plugins：插件
二、安装vue，运行Helloworld
（1）cmd切换到一个干净的目录
（2）安装vue命令行工具
# -g是全局安装，这里安装vue命令行工具
npm install -g vue-cli
我用的vue是2.x版本
（3）初始化一个基于webpack的新项目
# 创建项目
vue init webpack <项目名称>期间会有几个选项：
- Project name：项目名称（不能用大写），例如bwb
- Project description ：项目简介 ，例如 bwb
- Author：作者，例如bewindoweb
- Runtime + Compiler / Runtime only：运行时+编译器或只要运行时，当然选都要，第一个
- Install vue-router？是否需要vue路由组件，路由相当于管理URL跳转，要，Y
- Use ESLint to lint your code？是否用ESLint检查语法？前端刚入门，格式习惯很重要，要，Y
- Standard (https://github.com/standard/standard) / Airbnb (https://github.com/airbnb/javascript) / none (configure it yourself)：我选的第一个语法模板
- Set up unit tests？是否安装单元测试，要，Y
- Pick a test runner (Use arrow keys)：选择Jest
- Setup e2e tests with Nightwatch? Nightwatch是一个高级的自动化测试框架了，还没摸清门路，以后再要，选n
- Should we run `npm install` for you after the project has been created? 是否要帮你install，选NPM即可，会帮你install
会按项目名生成文件夹，并产生如下文件：
先不管，先启动服务器：
cd bwb
npm run dev即可通过http://localhost:8080看到如下页面：
4、用webstorm开发
打开WebStorm，打开该项目文件夹，点右上角Add Configuration，添加两个环境：
一个是开发环境，run dev：
还有一个是编译环境，run build。
添加好之后，选择dev，它会自动帮你去执行npm run dev的命令，十分方便：
5、认识项目文件
（1）build
该目录是webpack的目录，区分了很多类似product、dev等等环境，类似springboot的application.yml。
（2）config
常量配置，提供给build中的文件使用。
（3）node modules
webpack的插件库，所有安装的插件都在这里，类似java的lib文件夹，正如WebStorm给它的注解“library root”含义一样。
（4）src
核心工程代码目录，这个可以后面在分析。
（5）static
静态资源文件。.gitkeep是一个空文件，是为了让git能够追踪维护这个目录（git会忽略掉空目录，有了.gitkeep，它就不是空目录了）。
（6）test
前面配置的时候安装的单元测试，我暂时还不想写单元测试。
（7）.babelrc
babel配置文件，后续开发基本不会动了，Babel官方文档
（8）.editorconfig
编辑器风格，比如每行代码前面空格是几个等等。
（9）.eslintignore
ESLint语法编辑器不检查的文件和目录，例如生成目录/dist就不需要检查。
（10）.eslintrc.js
ESLint配置，后续不会动了，见ESLint官方文档
（11）.gitignore
git不追踪的文件和目录
（12）.postcssrc.js
CSS预处理插件，写过纯CSS的都知道，要兼容多个浏览器，有时候一条语句就要写多个浏览器的写法。postcssrc.js配置了AutoPrefixer，可以解决浏览器兼容问题。PostCSS官方文档
（13）index.html
首页入口
（14）package.json
类似maven的pom.xml，用于npm的包管理，当执行npm install的时候，会根据这里面的清单去安装依赖包。
有一些很特别的写法，例如：
"shelljs": "^0.7.6"这里的^指的是向后兼容，意思是只要大版本号（第一个数字）相同，你安装更高的版本也没问题。
（15）package-lock.json
实际上这个设计并不好，不应该随意地升级版本，会造成不同机器上运行结果不一致。因此package-lock.json明确指定了是在哪里下载的，版本号多少，例如：
"shelljs": {
"version": "0.7.8",
"resolved": "https://registry.npm.taobao.org/shelljs/download/shelljs-0.7.8.tgz",
"integrity": "sha1-3svPh0sNHl+3LhSxZKloMEjprLM=",
"dev": true,
"requires": {
"glob": "^7.0.0",
"interpret": "^1.0.0",
"rechoir": "^0.6.2"
}这样当有package-lock.json文件时，npm install会去同样的地方下载相同的包，就完全一致了。