VUE从零开始系列（安装脚手架），呆萌小白上手VUE

第一章 安装脚手架

前言

前端是个大杂烩，各类技术、框架层出不穷，从pc端到移动端，从前端到后端，从web到桌面应用，乃至原生安卓及ios。 能够说js在手，天下我有（手动滑稽）。

背景

说实话作了几年前端，在前一阵儿我仍是以为，管你什么框架，什么模块化的，老夫就用jquery，整那些花里胡哨的有啥用，我能实现需求就ok！哼哼，可是当我真开始接触到VUE的时候，WTF？还能这么写？开发起来简直不要太流畅啊！不用操做dom，只关心数据层，从接口拿到数据，更新下data，剩下的就不用你操心了。

介绍

接下来我就把我从jquery过渡到VUE的历程分享下，但愿能帮助刚入坑的你，相信在看我这篇文章以前，你应该也看过很多关于VUE的资料了，可是大部分只是概念+简单的片断，估计你跟我同样都是跟着敲完之后仍是一脸懵逼。因此我决定本身动手写一个我本身能看懂的，应该大部分人也能看懂的文档吧。。

（一）安装nodejs

须要nodejs的版本最少8.9.4及以上（很重要），具体怎么安装我就不讲了，这类教程网上一大把，别忘了npm的淘宝镜像源。想看本身的node版本是多少的话，就打开命令行输入node -v

（二）安装webpack

仍是打开命令行，输入npm install webpack -g，意思就是全局安装webpack，这样之后就不用每次新建一个项目都得从新装webpack了。完成以后输入webpack -v看下，若是出现下图：

接着输入y回车（感谢@傻梦兽 提醒，4.0以上版本的webpack须要安装webpack-cli，才能运行，抱歉疏忽了），继续输入 webpack -v，若是出现版本号，就安装成功了

（三）安装VUE脚手架

由于是从0开始的，建议你们仍是直接从脚手架开始吧，若是本身搭建的话，光是新建各类文件夹就已经头大了，况且还得本身配置webpack。继续在命令行输入npm install vue-cli -g，完成以后老规矩，输入vue -V查看是否安装成功，注意-V是大写。

以上几步，已经准备好了咱们须要的环境，接下来开始进入开发阶段

1. 随便新建一个文件夹，打开后在文件夹空白处按住shift+鼠标右键，点击在此处打开命令窗口，输入vue init webpack test，这里的test是指项目名称，你能够本身起名字，可是别用中文。以后一直回车，注意：? Use ESLint to lint your code? (Y/n)看到这一行的时候建议输入n，这是一个es6语法检测器，若是开启的话你得严格按照es6规则写代码，稍有不注意就会报错。

   

   到这里就基本建好了。 此时你会发现刚才新建的文件夹里多出了好多东西：

   

2. 在刚才打开的命令行中，输入cd test，就是进入你刚才新建的目录里，你的文件夹叫啥，你就cd啥
3. 继续输入npm install,会自动安装你须要的各类依赖
4. 完成以后开始让项目跑起来，输入npm run dev，运行成功在浏览器里打开http://localhost:8080,看到这个画面，就表明你已经成功了

   

结语

别着急，才刚开始，这个只是安装及运行起来你的项目，后续章节我会继续由浅入深的写下去，想看的能够关注我，今天先下班了。。

全部章节

• 第一章 安装脚手架
• 第二章 初体验
• 第三章 登陆页
• 第四章 axios
• 第五章 路由钩子及插件开发