最近琢磨着给咱这小工作室整个门面，也就是搭建个官网。虽说现在各种平台都能展示，但总觉得缺点还是得有个自己的地盘才像话。既然是自己动手，那就得选个顺手的工具，* 这玩意儿我之前也用过，感觉挺灵活，就它！

第一步：准备工作

先得把环境搭起来。说白，就是得装上 *。这玩意儿就像个大管家，能帮你管理各种工具和依赖。直接去 * 的官网，瞅准下载个适合自己电脑系统的版本，一路点“下一步”就完事儿。

装完之后，咱还得验证一下是不是真装上。打开电脑的命令行窗口（就是那个黑乎乎的窗口），敲上 node -v，再敲个回车。要是能看到版本号蹦出来，那就妥！

第二步：安装 Vue 脚手架

光有 * 还不够，咱还得整个“脚手架”。这玩意儿能帮你快速生成 Vue 项目的基础结构，省得你再一点点去配置。Vue 官方出个叫 Vue CLI 的工具，就是干这个的。还是在命令行里，敲上 npm install -g @vue/cli，回车，等着它自己安装就行。

装好之后，你可以再输个vue --version验证一下，看看版本号对不对得上。

第三步：创建项目

环境和工具都齐活，咱就可以开始创建项目。找个你喜欢的地方，新建个文件夹，用来放你的项目代码。然后在命令行里，用 cd 命令切换到这个文件夹下，再敲上 vue create my-website（"my-website" 可以换成你喜欢的项目名字），回车！

这时候，Vue CLI 会问你一些问题，比如要不要用 TypeScript、要不要用 ESLint 之类的。我个人比较喜欢用默认的配置，比较省事，直接一路回车就行。等它跑完，一个崭新的 Vue 项目就创建好！

第四步：跑起来看看

项目创建好，咱得先跑起来看看效果。还是在命令行里，先用 cd 命令进入到你的项目文件夹（比如我的是 cd my-website），然后敲上 npm run serve，回车！

这时候，Vue CLI 会启动一个本地开发服务器。等它跑完，你会在命令行里看到一个网址，通常是 http://localhost:8080。把这个网址复制到浏览器里打开，就能看到你的 Vue 项目的初始页面！

第五步:折腾页面

接下来咱就开始折腾我们自己的页面,打开刚才创建好的项目，src文件夹下就是我们主要编写代码的地方。

• components文件夹： 这里放的是一个个小零件，比如导航栏、按钮、底部信息栏等等。
• views文件夹： 这里放的是一个个完整的页面，比如首页、关于我们页面、产品展示页面等等。
• 这是整个网站的入口，各个页面都会在这里汇集。
• 配置老大。

咱先定一个小目标，比如先把首页给搞出来。在 views 文件夹里新建一个 * 文件，在 components 文件夹里新建一个 *(就是首页顶部那个大图)文件，一个 *(就是首页底部的说明版权等)文件。

*引入*和*，先把架子搭建起来，其他页面也是同样的搞法。

第六步：收拾细节

页面搭好，还得收拾收拾细节。比如，我想把网站的图标换成自己的 Logo。我试半天，发现把 Logo 图片放到 static 文件夹里效果最在多个浏览器里都能正常显示。放到 assets 文件夹里，有时候就不行。

基本就这样，当然一个完整的官网还有很多细节要处理，比如每个页面的具体内容、各个模块之间的跳转、数据的交互等等。不过只要把基础框架搭这些都好说，以后慢慢加就是。