### 安装
Node.js 和 Vue.js 框架
#### 安装
Node.js
1
. **下载
Node.js**
访问 [
Node.js 官方网站](https://
nodejs.org/)，根据操作系统选择适合的版本（推荐使用 LTS 版本）。点击下载安装包并保存到本地。
2
. **安装
Node.js**
双击下载的安装包，按照向导提示完成安装。在安装过程中，可以保持默认设置。安装完成后，打开终端或命令行工具，输入以下命令验证是否安装成功：
```bash
node -v
npm -v
```
如果显示
Node.js 和 NPM 的版本号，则表示安装成功[^2]。
3
. **配置环境变量（可选）**
如果需要自定义全局模块安装路径，可以通过以下命令修改全局模块目录：
```bash
npm config set prefix "D:\
NodeJS\
node_global"
npm config set cache "D:\
NodeJS\
node_cache"
```
然后将 `D:\
NodeJS\
node_global` 添加到系统的环境变量中，以便可以在任何位置运行全局安装的模块。
#### 安装
Vue.js
1
. **通过 NPM 安装
Vue CLI**
在确保
Node.js 和 NPM 已经正确安装的情况下，使用以下命令安装
Vue 的命令行工具（
Vue CLI）：
```bash
npm install -g @
vue/cli
```
安装完成后，可以通过以下命令验证
Vue CLI 是否安装成功：
```bash
vue --version
```
2
. **创建
Vue 项目**
使用
Vue CLI 创建一个新项目，执行以下命令：
```bash
vue create my-project
```
这里 `my-project` 是项目的名称，可以根据需要更改。进入项目目录并启动开发服务器：
```bash
cd my-project
npm run serve
```
打开浏览器访问 `http://localhost:8080`，即可看到新建的
Vue 项目正在运行[^1]。
3
. **直接通过 CDN 引入
Vue（可选）**
如果只是想快速测试
Vue 的基本功能，而不需要复杂的构建过程，可以直接通过 HTML 文件引入
Vue 的 CDN 链接：
```html
<!DOCTYPE html>
<html>
<head>
<title>
Vue Test</title>
<script src="https://cdn
.jsdelivr
.net/npm/
vue@2"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new
Vue({
el: '#app',
data: {
message: 'Hello
Vue!'
}
})
</script>
</body>
</html>
```
将上述代码保存为 `
.html` 文件并在浏览器中打开，即可看到
Vue 渲染的内容[^4]。
#### 总结
- **
Node.js** 主要用于服务器端编程，具有高效的 I/O 操作
和事件驱动特性。
- **
Vue.js** 是一个专注于前端开发的框架，通过数据驱动
和组件化的方式帮助开发者高效地构建用户界面[^3]。
---
扫一扫
1925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
