基本技术栈：
Html——（负责网页的结构，满打满算两天可掌握）
Css ——（负责网页的样式，掌握到精通至少三周）
（但是好消息，随着UI框架的繁盛，这个知识点可以去W3Cschool上花一天了解即可，就像让你打电话给你七舅爷家的二姑姑一样，知道从通讯录里找联系方式就行，不必真背😉😉）
Javascript——（样式下的效果和功能实现，所谓的“行为”，一入此潭深似海，君请慎重）
(前端技术的差距往往体现在JavaScript操作上的差距，功能广泛，初学者依然建议先花一周时间了解相关概念，之后瓶颈期时可系统学习)
Nodejs环境——（npm包管理工具，了解即可，但node作为服务器端的开发语言属于进阶技能）
Webpack自动化构建工具(作为工具了解即可，后期可深入了解，不过还有 vue、react这么多的框架知识，😒😒深入了解也有点难度)
综上：经过大约两周的时间，恭喜你已经达到前端开发的入门水平啦！让我们现在一起用 vue来搭建一个简单上手的项目吧！
1、安装node.js
进入官网，直接下载，不放心的可以去csdn上寻找教程，此不再赘述（5分钟左右即可完成）
备注一下：如果道友使用的vue为4.0以上，那么node的版本请选择10.0及以上
2、安装cnpm
解释一下，npm的全称为node package manager，是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等），其安装插件是从国外服务器下载。命令提示符执行：npm install
而cnpm加了一个“c”,聪明的你应该已经想到其和npm的区别了——它的服务器在国内，充当这个好心人的是淘宝团队，后面即将聊到的element ui 也是阿里的饿了么团队制作的。安装：npm instll -g cnpm -registry=registry.npm.taobao.org
查看当前cnpm版本(验证是否安装成功):cnpm -v
此外，yarn也是个包管理器，是facebook发布的一款欲“取代”npm的包管理工具
使用npm安装yarn：npm install-g yarn
我呢，目前觉得两者效果差不多，因为念旧，所以依旧使用npm
3、安装vue-cli脚手架构建工具
介绍一下vue-cli：一个官方的命令行工具，可用于快速搭建大型“单页”应用。
vue-cli,我们是基于webpack来搭建的，而webpack又是基于node的，所以我们一开始第一步就是下载node.js，这点仅作为补充，知道即可。
因为后面需要进入使用命令行进入指定文件夹，所以大家可以下载“Cmder Here”这类插件或者直接打开你要的文件夹，在其上面的文件目录，选中，后面添加“cmd”即可。当然，后面大家也可以直接用cli的图形化界面来进行操作，命令指示符：vue ui (但是，这个需要cli的版本3以上，而现在市场上大多数公司使用的版本是2.9.6，也就是并不支持该功能，但还是希望君可以了解一下后者，毕竟更加简单实用)
1、为了后续开发上出现问题，先确认是否有安装过vue-cli ：vue -V
如有的话，就用命令行卸载即可：npm install -g @vue/cli 或 yarn global add @vue/cli
2、命令行进行安装：cnpm install -g @vue/clil
指定版本： 如是3.0以下 ：_npm install-9 vue-cli@版本号 _
如是3.0以上 :npm install-9@vue/cli@版本号
4、创建项目
命令行：vue create 项目名称
？Please pick a preset：（Use arrow keys）
> default（babel，esTint） //默认操作
Manua1 ly select features //手动设置
假设我们选择后者，命令行工具会显示以下信息：
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press kspace> to select, <a> to toggle a
11, <i> to invert selection)
>(*) Babel //一种转码器，比如把ES6语法转换成浏览器可以识别的ES5
( ) TypeScript //js的超集,在js的基础上扩展了一些特性,简单说Typescript=Javascript+类型系统+ECMAScript6 ( ) Progressive web App (PWA) Support
( ) Router //路由，根据不同的地址，返回给用户不同的内容，所谓的“单页”应用，它功不可没
( ) Vuex
( ) CSS Pre-processors//CSS解释器
( ) Linter / Formatter//文本格式，规范
( ) Unit Testing//测试
( ) E2E Testing
这里假设选择了Babel、Router、Vuex等几项
？Check the features needed for your project: BabeL, Router, Vuex
？ Use history mode for router? ( Requires proper server: setup for index fallback in prod uction (Y/n)//这是在询问你使不使用history的路由模式，随便选，不重要
这里假设选择了n
? Where do you prefer placing config for Babel, ESLint, etc.?//这是在询问你打算把babel eslint ect配置文件放在哪里
In dedicated config files//这个指的是特定的配置文件，类似于自定义的意思
> In package.json//默认的package.json文件
这里假设选择了后者
? Save this as a preset for future projects? (y/N) //询问你将此保存为将来项目的预设
这里假设选择后者，等待一会后
Running completion hooks...
Generating README . md...
Successfully created project 项目名 .
Get started with the following commands:
$ cd 项目名
$ yarn serve
进入项目路径之后，可以输入npm run serve 或者 npm run dev
到此呢，整体的开发环境就算是搭好了，但我还是建议使用vue ui 来进行图形化窗口，虽然敲命令行感觉很酷炫的样子，但是好用才是硬道理呀，如果使用cli的图像化窗口，文章名就该改为“3分钟，即刻搭建vue开发环境”了😂😂。
总之，谢谢大家观看，本文适合新手小白入门操作，大佬还请多多指点。
