今儿个心血来潮，想搞个自己的网站玩玩，琢磨半天，还是选 Vue，毕竟这玩意儿上手快，搭起来也方便。下面我就把整个过程给大伙儿唠唠。

准备工作

你得有个能跑代码的地儿，我这儿用的是我自己电脑。电脑上得先装上 *，这玩意儿是跑 Vue 的基础。装好 *，它会自带一个叫 npm 的工具，这工具能帮你下载安装各种东西。

我打开命令行（就是那个黑乎乎的窗口），输入node -v，看看 * 装好没。跳出来一个版本号，v16.13.0，说明装好。

安装 Vue 脚手架

啥叫脚手架？说白就是一个帮你快速搭好项目框架的工具，省得你自己一点点去配置。Vue 的脚手架叫 Vue CLI。我在命令行里输入这么一串：

npm install -g @vue/cli

这意思就是用 npm 全局安装 Vue CLI。等一会儿，它就装好。以后再创建vue的项目就不用再安装这个。

创建项目

我就用 Vue CLI 创建一个新项目。我还是在命令行里输入：

vue create my-website

这里的“my-website”就是我的项目名字，你可以改成你喜欢的。然后它会问你一堆问题，比如要不要用 TypeScript、要不要用 Vue Router 之类的。我一路回车，选默认配置，用的是 Vue 3。

等它跑完，一个名叫“my-website”的文件夹就出现在我的电脑里。这就是我的项目文件夹。

瞅瞅项目结构

我打开这个文件夹，里面有一堆文件和文件夹。挑几个重要的说说：

• node_modules： 这里面放的是项目依赖的各种库，不用管它。
• public： 这里面放的是一些静态资源，比如图片、图标啥的。
• src： 这是最重要的，我们的代码都放在这里。
• src/components： 这里面放的是一个个组件，组件就是网页上的一块块东西，比如导航栏、按钮之类的。
• src/*： 这是整个应用的根组件。
• src/*： 这是整个应用的入口文件。

跑起来看看

项目有，得跑起来看看啥样。我打开命令行，先进入到项目文件夹里：

cd my-website

然后输入：

npm run serve

等一会儿，命令行里提示我一个网址。我复制这个网址到浏览器里打开，就看到一个 Vue 的默认页面，上面写着“Welcome to Your * App”。

写点自己的东西

光有个默认页面可不行，得写点自己的东西。我打开 src/* 文件，把里面的内容改改，加几个字：

然后保存文件，浏览器里的页面自动就刷新，显示出我新加的内容。真方便！

安装 Element Plus

我想让我的网站更好看点，就打算用 Element Plus 这个 UI 框架。这框架提供一堆现成的组件，比如按钮、输入框、表格之类的，直接拿来用就行，省得我自己去写样式。

我打开命令行，输入：

npm install element-plus

等它装我在 * 文件里加几行代码，把 Element Plus 引进来：

然后，我就可以在我的组件里用 Element Plus 的组件。比如，我在 * 里加个按钮：

保存文件，浏览器里的页面就多一个漂亮的按钮。

安装 Vue Router

一个网站不能只有一个页面，得有多个页面，并且能在页面之间跳转。这就需要用到 Vue Router。我打开命令行，输入：

npm install vue-router

装好之后，我得配置一下路由。这部分有点复杂，我就不细说，总之就是告诉 Vue Router，哪个网址对应哪个页面。

总结

到这儿，一个简单的 Vue 网站就搭好。这只是个雏形，要真正做一个完整的网站，还得继续写代码、加功能。不过万事开头难，有这个基础，后面的就好办。

这只是一个简单的开始，接下来还需要不断地调整，不断地完善，才能最终实现一个完整的网站。