BVDN-2 环境搭建（1）

既然本教程是针对零基础的人，那自然是在Windows环境下进行网站的建设（假设大家都不会用linux）。至于最后的部署，放心，凡是涉及到linux的部分，本教程会详细地教给大家，凡是本教程要用到的东西，全部都从头开始讲。

Bootstrap和Vue二者属于前端的范围，其实没有什么可以搭建的环境。但是你总要先从网上获取它们。而为了方便地获取到它们，集中存放，统一管理，你需要node.js。

百度搜nodejs，找到nodejs中文网

有百度还要什么chocolatey

下载并安装好node.js之后，你将得到它附带的一款js模块管理利器：npm。有了npm，你就可以用一句指令获取到想要的js模块，而不用上百度一个个搜索和下载（有时候去网上自己找一些稀有的js模块真的能把人找崩溃的）。

打开命令提示符cmd，输入D:回车，然后输入npm install bootstrap

神器npm

等指令跑完后，你就会在D盘发现一个node_moudles文件夹，里面会有bootstrap文件夹，这就是我们刚才用指令下载下来的Bootstrap模块

下载好的模块

在Bootstrap文件夹里会有一个叫dist的文件夹。里面会有css，font，js三个文件夹

记住这三兄弟！

在D盘根目录下新建一个叫static的文件夹，把刚才那三个文件夹复制进去，Bootstrap环境搭建至此完成

完了？

Bootstrap的运行需要jQuery，所以你还需要npm install jquery

jQuery，简称jQ

将dist文件夹里边的东西复制进static/js（注意！放在js，而不是static里，同类文件要放在一起哟）

注意是static/js

这次真的完成了

npm install vue，重复刚才的动作，把dist文件夹里的东西复制到static/js

Vue还有一个小兄弟叫Vue-router，我们也需要它，所以请顺手输入一行npm install vue-router，并重复上面的操作，拷贝dist里的内容

最终要有这些东西

编程没有它，眼睛迟早瞎！赶紧安装吧

保护视力，从这里开始

我们已经有了Bootstrap和Vue，前端的环境算是搭好了。现在，在D盘新建一个txt文件，然后改名为base.html（注意要改后缀名）

注意改后缀名

之后用sublime text打开它，然后输入<h，你将看到

图片发自简书App

然后，只需按下回车，就会看到

自动完成

超级方便，有木有？

不自己手敲，你良心不会痛吗

（这个网页和static文件夹不要删，以后有用）完成后用浏览器打开刚才的网页，你会看到

漂亮的UI

是不是很有手机App的感觉？这就是Bootstrap的效果！（上次我说过了，你用Bootstrap写出的网页，和市场上商用的网页的视觉效果是差不多）。在下边的框里输入，上面的框应该会同步更新，这就是Vue的作用！

怎么样，前端很简单吧！

BVDN，傻子也能建网站。

最后编辑于：2017.12.28 22:24:14