手摸手搭建vue脚手架

脚手架是什么鬼东西？下面图的就是脚手架。不过它是盖房子的脚手架，我们用的是前端开发的脚手架，那看了这图也知道手脚架是什么鬼东西大概有啥用了吧？对，就是方便。

image.png

之前一开始在学习vue的时候一直用的script标签直接引入，基本上没啥大问题。后来差不多做一些项目的时候，都用到了webpack之类的自动化构建工具。一开始接触webpack这东西，这真的是从入门到弃门而走，一大堆不明bug，一天下来不是在百度就是在百度的路上~然后既然从0搭建这么浪费时间，那就直接用别人已经弄好的就ok了。

对滴，就是 vue-cli。既然人家都有组好的，那就遵循我们长久以来相信的真理（哈哈哈~笑喷！）： image.png

默认是已经装好了node环境，不知道怎么安装的话 可以去百度千度搜狗搜猫都行去找个教程安装哈~

首先，第一步，新建个项目文件夹shift+鼠标右键选择打开命令窗口

npm install -g vue-cli    

然后安装好了之后新建个项目的目录

 vue init webpack test

然后过一会会出现下面的这些命令：

image.png

Project name 这里可以输项目名称
Project description 这里可以输项目的描述
然后就一直回车
Install vue-router 这里问要不要安装路由
Use ESLint to lint your code 然后这里问要不要装ESList检测
然后就一直回车到最后ok了。

然后接下来去安装一下依赖 ，你可以退出手动进去刚刚的test文件夹里面再打开命令行，或者直接在命令行cd进去文件夹，我这里是直接命令行操作了

 cd test
npm install

然后上面install这里最好还是用npm吧，虽然可能会等的时间久一丢丢，但是用cnpm的话有时候会漏些东西 ~
.......
.......
等待已久的时间过去之后，这里应该都安装好的了。这里是装好之后的文件夹

image.png

然后接下来直接在命令行输入npm run dev去跑一下。

npm run dev 

image.png

默认是8080的端口（如果想修改的话可以在根目录下打开config/index.js文件，找到下面这一块改掉再重新run一下就好）

image.png

然后显示这里，就结束了~_{然后你就可以去为所欲为的写你的项目了}

image.png