从壹开始先后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战：开发环境搭建【详细版】
缘起
哈喽你们好，兜兜转转终于来到了Vue实战环节，前边的 6 篇关于Vue基础文章我刚刚简单看了看，感受写的仍是不行呀，不是很系统，因此你们可能看上去比较累，仍是得抽时间去润润色，修改修改语句和样式，至少也得对得住粉丝哈，应该给博客园官方提个小建议，要是能容许好友或者其余人修改文章的功能就行了，好比百科和Wiki 那种就挺好哈哈，今天呢，终于到了安装环境的一章了，网上的栗子和文档也是不少，原本打算跳过这一章节，可是想一想，本系列仍是须要这一块来完善的，这才是总体教程嘛，好啦，废话很少说，准备好电脑安装吧！javascript
今天的主要工做就是配置开发环境，不会涉及到代码，会平面化的铺开来讲，相对来讲比较简单，只是作一个记录使用，主要呢由如下几个方面：css
A：安装 IDE —— Webstorm / VSCode / Atomhtml
B：安装 nodejs 环境前端
C：安装 NPM / CNPMvue
D：安装 Gitjava
E：安装 webpacknode
F：安装 vue-cli 脚手架jquery
G：建立 blogvue 工程webpack
H：对总体项目文件简要说明git
I ：Hello World
好啦，开始今天的表演~~~
零、今天要完成左下角红色的部分
A、Vue 常见的IDE —— 我是开发工具，干活的都是我
一个好用的工具能够为开始节省太多的时间，增长效率，从而达到事半功倍的做用，做为一个.net 攻城狮，我几乎天天都泡在 visual studio 里，这个号称是宇宙级编辑器，固然如今有不少的大神都说开发人员用一个 node++就行，嗯~~~说实话不敢苟同，就好比说今天还着急的写了几个页面，要不是智能提示，真的会慢不少。今天呢，要说的Vue的开发工具，这里就简单说下三种常见的开发工具，你们均可以试试，根据我的爱好（我询问了几个vue开发的朋友，广泛用的是sublime，而后如今好像VSCode 和 Webstrorm的比较多，剩下的就是Atom，本系列用的是WebStorm）。
一、VsCode
安装地址：https://code.visualstudio.com/Download
推荐优势：一、做为微软大大的产品，咳咳，仍是比较给力，我在微软工做的时候，看到好多人在为了visual studio开发，甚至一个小组件都精益求精，点赞；
二、首次开始初始化特别快，号称是最快的，若是电脑比较低配，推荐使用；
三、微软这两年在开源道路山越来越给力，因此VsCode固然也是开源的，并且颜值也是能够，至少比Webstorm漂亮一丢丢；
四、尤雨溪大大一年前曾经也是很推荐，不知道如今有没有变化好好；
五、各类插件随心安装，使用量不少，插件很丰富；
六、支持断点调试debug，也是很嗨；
二、Webstorm
安装地址：https://www.jetbrains.com/webstorm/download/#section=windows
推荐优势：一、只能代码补全，针对不一样的浏览器，还支持基本流行库JQuery, YUI, Dojo, Prototype, Mootools and Bindows。
二、能够格式化代码，也能够自定义，做为强迫症的我来讲，必需要代码整齐才是好的代码哈哈；
三、智能提示，联想查询，能够像VS那样，Ctrl+鼠标点击，能够跳转到定义；
四、代码检查和修复，能够提示错误的所在地点，快速解决；
五、最新版本已经继承Vode插件，能够界面话启服务，编译，打包等等，不再用写命令行了；
六、nodejs 最好的开发工具，没有之一。只要你会用 chrome 调试浏览器端的 js，那么你就会用 webstorm 调试 nodejs。
七、简单易操做的版本控制，只要你简单的配置下git或svn就可使用快捷键快速的进行版本控制
八、实时保存，不用频繁的按ctrl+s了
Diss缺点：从上边的功能也能够看出来，VsCode注重开源，快速和社区，这些Webstorm都木有
一、启动缓慢，内存占据大（300M+），若是再配上websocket，低配置的笔记本就开始唱歌了[哭笑]；
二、是收费滴，真挺贵，只有一个月的无偿使用，不过上有政策下有对策，各类序列号，破解等历来没停过；
三、样式长的不是很好，虽然有不少主题，属于注重功能型选手。
三、Atom
安装地址：https://atom.io/
推荐优势：一、啥都不说，就冲着这个颜值，就得加分哈哈，还有各类主题；
二、Atom是最大的开源网站github出的，基本功能和颜值都在线的，插件的质量仍是很高的；
三、强大的社区作后盾，为程序员开发提供福利，特别是前端程序员；
四、固然还有很大的优势，就是开源免费，想用啥均可以；
缺点：一、仍是稍微会卡顿的，不过官方正在慢慢优化，相信github也会慢慢加大投入；
总结：嗯。。。不太好说哈，你们能够思考思考，不过可能综合考虑来讲，VsCode可能性价比高，Webstorm功能深，Atom开源颜值美。
B、安装Nodejs环境 —— 我是运行环境，没我不行
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
Node.js 的包管理器 npm，是全球最大的开源库生态系统。
安装地址：官网 https://nodejs.org/en/download/
而后就是普通安装，一步一步 next 便可
安装成功之后，打开咱们的安装路径，咱们能够看到，除了node，文件夹里还有npm，一块儿被安装了
下面我们会说到 npm，这里我们先看node是否安装成功，打开 CMD 命令窗口，输入 node -v （注意要重启电脑）
这个时候，能看到node 的版本号，证实咱们已经安装成功了，并且是全局的。
C、安装 npm / cnpm —— 我是包管理器，想要的都来拿
首先呢，咱不能直接上来就安装是吧，得明白其中的含义，为啥要安装，
NPM 名字的由来：Node Package(包) Manager(管理器)，从名字看来它是经过 node 的包管理器，嗯大概了解了，那具体来讲呢，好像仍是不清晰，这个时候我们说个栗子1，
我们平时开发c#的时候，须要安装包，咋安装的呢，就是经过nuget包管理来安装，没错，npm也是起到了这个做用，只不过是 node 须要用的前端包。若是仍是不太清晰，我们说个前端的栗子2，
平时我们开始jQuery的时候，须要引用jQuery.js 文件是吧，这一两个还好，要是多了可咋整，一个个手动添加不方便呀，欸！这个时候就有人想到了办法，用 JavaScript （运行在 Node.js 上）写的 npm，来控制已经提交到 远程仓库里的包，这些包都是原做者一个个发布上去的，起了一个名，若是我们使用的时候，只须要再 packbag.json 中，写上这个名字，嗯！就成功的从远程 down 下来了，是否是很方便，是否是感受前端慢慢工程化了！
说了这么多，那到底如何安装呢，不用慌！上边我们也说了，npm 是运行在node.js 上的，因此我们刚刚安装 node.js 的时候已经安装好啦，不信来试试，
在cmd 命令窗口中，输入 npm -v ，就看到了本身安装的版本了。
而后就开始用着很开心，可是类，后来发现这个远程仓库是在国外的，每次都须要翻墙，有时候一二百兆的文件，须要等很久，更厉害的还卡到了一半，就挂掉了，哎，真是桑心，欸！国外有大神，国内也有老板，没错，就是一直专一于开发的阿里攻城狮们，本身根据 npm ，搭建了一个国内的镜像，基原本说内容都差很少，虽然号称一直在同步，不过有时候命令仍是有些问题，不过基本的都没啥问题，若是你不能翻墙，若是电脑很卡，没问题！放心的时候吧，就是 cnpm！那如何安装呢？
咱们刚刚已经成功的安装了npm了，这时候咱们执行下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成便可。之后呢，任何 npm 的命令，均可以使用 cnpm 来写，好比下边，就是这么简单！
npm run dev//正规版 cnpm run dev //镜像版
D、安装 Git —— 我来简化cmd操做的，能够不用我
这里要说下为何安装 git，由于在之后的开发中，会涉及到各类启服务呀，发布呀等等，并且都须要进入不一样项目的不一样文件夹操做，经常使用的呢是如下三个操做：
一、经过cmd 命令行，进入不一样的文件夹，好比：cd D:\Program Files\nodejs ，而后再进入不一样的文件夹，万一哪次没看好生成错了，就麻烦，因此咱们须要工具。
二、经过 power shell 来执行，不知道这个工具的呢，能够百度下，目前win10自带都有，使用起来也很简单，在当前文件夹下，先按下 shift 键，而后点击鼠标右键，就弹出来了，
而后执行命令也是能够滴，是否是很方便，固然还可使用下一种。
三、经过 git 的方法，https://git-scm.com/downloads，而后普通安装成功后，就能看到上图中的 Git Bash Here 了，就是直接进入当前文件夹地址，而后就能够随心的操做了。
总结：经过必定的工具来辅助开发仍是颇有必要的，安全又可靠。
E、安装webpack —— 我是打包东西的
仍是老规矩，我们呢，先说说什么是WebPack，这里要说webpack ，那首先就得说说 SPA
一、什么是SPA
这个名字起的，总能让你们想起来其余的哈哈，言归正传，如今的web网站正在慢慢前端化，在vue开篇的时候我也说过了，关于个人开发历程，来简单说了下web的发展过程《十四 ║ VUE 计划书 & 个人先后端开发简史》，总结来讲，愈来愈多的JS，由整页的刷新，到局部刷新，到如今的SPA（单页面应用程序）—— 就是整个项目是一个页面，经过锚点 路由，将所有的组件结合起来，看起来像是多个页面。因此你们想一下，如今整个web应用程序都融合到了一个页面里，一个体积庞大的代码库就须要好好的控制和组织，不能出现混乱的局面，这个时候为了解决这个问题，就出现了——模块化编程的思想。
二、传统前端开发的问题
这个时候若是仍是不太清楚，那咱们举个栗子：
你们在开发的时候必定会遇到过这个问题，个人项目是用Bootstrap框架开发的，可是呢，忽然领导看上了EasyUI其中的一个组件或者是小插件，这个时候，咱们就会直接把EasyUI的样式给引入进来，
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> //引入了EeayUI样式 <link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.5/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.5/themes/icon.css"/>
这个时候，原本应该很开心的看结果了，发现好多地方都冲突了，额。。尴尬呀，固然正规项目是不能这么开发的，都是本身的前端工程师写的，这里只是举一个反面教材，大概就是这个意思，固然还有JS文件的引用，好比这样
<script src="module111.js"></script> <script src="module222.js"></script> <script src="libraryABC.js"></script> <script src="module333.js"></script>
模块接口导出到全局对象,即window对象。模块的接口能够访问全局对象的依赖关系，从上边的问题中能够看出来如下问题
全局冲突
对加载的顺序严重依赖
开发人员必须人工解决模块/库的依赖关系
大型项目，script.js能够很长,难以管理
三、CommonJs: 同步加载 就出现了
这种风格用同步require 的方法去加载一个依赖并用暴露一个接口。 一个模块能够经过给export对象添加属性或给module.exports设置值 来指定导出。
require("module"); require("../file.js"); exports.doStuff = function() {}; module.exports = someValue;
服务器端node.js用的就是这种标准。 1. 服务器端模块能够重用 2. 已经有许多模块用这种风格(npm)。生态圈良好 3. 很是简单和容易使用。
四、什么是webpack，为何要使用它
webpack是一个模块打包器。WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。webpack把模块(s)连同它的依赖一块儿打包生成包含这些模块的静态资源。现有的模块打包器不适合大项目（大单页面应用）程序。代码分割和静态资源无缝模块化的迫切需求，催生了一个新的模块打包器。 我试图扩展示有的模块打包器，可是它没能实现全部的目标。
1. 把依赖树切分红块，实现按需加载。
2. 保持低初始加载时间
3. 每一个静态资源都能是一个模块
4. 具有把第三方库集成为模块的能力
5. 具有打包器每一个部分几乎都能本身定制的特色。
6. 适合大型项目。
安装：直接执行 npm 命令
npm install webpack -g
这个时候，咱们的 webpack 就已经安装完成啦，之后可使用了。
F：安装 vue-cli 脚手架 —— 我是用来建立项目模板的
vue-cli 是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板的，脚手架你们确定知道，就是一个架子，用来搭建项目的总体基本骨架，有点儿什么意思呢，就好比我们开发 .net 的时候，我们其实能够本身一步一步的建 mvc ，可是呢，VS给咱们封装了 MVC框架，咱们直接就生成了总体框架，包括基础包和一些必要文件夹，vue-cli 也是这个做用。
全局安装：直接输入 npm 命令
npm install --global vue-cli
安装完成后，咱们输入 vue -V（这里是大V），看到版本号，就证实安装成功了，如今已是 3.0 的脚手架了，生成的文件夹和 2.0 的不同，一下子我们都会说到。
G：建立 blogvue 工程
一、先说说 2.0 的建立工程的过程
一、进入指定文件夹后，执行
vue init webpack blogvue
二、而后就是一系列选择的过程
而后就是一直等待就好了，看到完成了。而后进入该项目文件夹，执行 npm run dev，就能够启动了
就这样启动了。
二、而后呢我们再说下 3.0 的建立工程过程
脚手架升级3.0
首先执行下命令 npm i -g @vue/cli 升级到3.0（ 注意管理员权限 ）
安装好后，开始建立咱们的项目 vue create project-name
这里有两个方式：默认方式和手动方式
默认方式就是安装 babel 和 eslint ，一致 Enter 键往下走就是了，由于不须要那么多，因此我就选择手动了，这里说下，好多人第一次不知道如何进行选择——使用键盘上下键来操做，而后 Enter 选中，而后就会出现插件列表，也是用上下键，而后用 空格键 来选中，下边有动图。
选择要安装的配置（注意： Linter / Formatter 尽可能不要选，会常常报格式不正确警告和报错，若是无所谓也能够安装）
特别是在 build 的时候，也会出现报错，可是只要看到生成 dist 文件夹就好了，不用关注那些 errror 和 warning
下边是选择的过程：
这里说下这几个的意思：
babel：一个javascript转译器，将最新版的js语法（es六、es7）转换为现阶段浏览器能够兼容的js代码
typescript：做用有些相似于babel，拥有类型检查能力和面向对象新特征。
PWA：渐进式WEB应用
Router：路由，设置url，使不一样的url显示不一样的页面
Vuex：做用相似于全局对象，可是并不彻底相同。
CSS Pre-processors：css预处理器
Linter / Formatter：代码规范标准 // 注意：尽可能不选
Unit Testing：单元测试
E2E Testing：e2e测试
接下来，选择css预处理，这里我选择stylus
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS LESS > （*）Stylus
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增长了一些编程的特性，将CSS做为目标生成文件，而后开发者就只要使用这种语言进行编码工做。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，而后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增长一些编程的特性，无需考虑浏览器的兼容性问题，例如你能够在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
这里说下 stylus ：来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，不过在使用人群上不如Sass和LESS。
而后选择格式化配置
选择什么时候检查代码规范 —— 保存的时候
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit
选择配置的存放地址
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > (*)In dedicated config files //独立文件存放 In package.json// package.json 文件
而后是否将上述配置保存（保存后，下一次将能直接一键配置）
Save this as a preset for future projects? (y/N)
下次安装的时候就是这样的
接下来就是安装了，等待中...
三、经过可视化UI页面建立
咱们能够直接经过命令，vue ui 来调取页面，基本都是同样的，没有啥区别，只是更UI化。
具体的你们能够玩玩，这里就不细说了。
H：对总体项目文件简要说明(整理中)
一、2.0的总体项目构造是这样的
├── README.md // 项目说明文档 ├── node_modules // 项目依赖包文件夹 ├── build // 编译配置文件，通常不用管 │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config // 项目基本设置文件夹 │ ├── dev.env.js // 开发配置文件 │ ├── index.js // 配置主文件 │ └── prod.env.js // 编译配置文件 ├── index.html // 项目入口文件 ├── package-lock.json // npm5 新增文件，优化性能 ├── package.json // 项目依赖包配置文件 ├── src // 咱们的项目的源码编写文件 │ ├── App.vue // APP入口文件 │ ├── assets // 初始项目资源目录，回头删掉 │ │ └── logo.png │ ├── components // 组件目录 │ │ └── Hello.vue // 测试组件，回头删除 │ ├── main.js // 主配置文件 │ └── router // 路由配置文件夹 │ └── index.js // 路由配置文件 └── static // 资源放置目录 └── test // 咱们的项目的单元测试文件
二、3.0的总体项目作了很大的调整，没有了 build 和 config
├── public // 项目公共文件夹 │ └── favicon.ico // 项目配置文件 │ └── index.html // 项目入口文件 ├── src // 咱们的项目的源码编写文件 │ ├── assets // 基础样式存放目录 │ │ └── logo.png // 基础图片文件 │ ├── components // 组件存放目录 │ │ └── HelloWorld.vue // helloworld组件 │ ├── views // view存放目录 │ │ ├── About.vue //about 页面 │ │ └── Home.vue //Home 页面 │ └── App.vue // App入口文件 │ └── main.js // 主配置文件 │ └── router.js // 路由配置文件 │ └── store.js // Vuex store配置文件 ├── tests // 测试文件夹 │ ├── unit // 单元测试 │ │ ├── .eslintrc // 基础图片文件 │ │ └── HelloWorld.spec.js └── babel.config.js // babel 配置文件 └── package.json // 项目依赖包配置文件 └── package-lock.json // npm5 新增文件，优化性能 └── postcss.config.js // └── README.md // 说明文档
I、结语
好啦，今天的安装就到这里了，固然还有一些小技巧我尚未说，终于出现传说中的Hello World了，下次我们就开始正式搭建项目啦，再见咯~~~