一、基础环境搭建

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 registry

2、认识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会去同样的地方下载相同的包，就完全一致了。