引言
Vue.js 是一个流行的 JavaScript 框架，它允许开发者用简洁的方式构建用户界面。本文旨在为初学者提供一个从零开始学习 Vue 的全面攻略，包括环境搭建、项目创建、组件使用以及如何直接执行 Vue 项目。
环境搭建
安装 Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它为 Vue 开发提供了必要的支持。以下是安装步骤：
- 访问 下载适合你操作系统的安装包。
- 运行安装包并按照向导进行安装。
- 选择默认配置。
验证 Node.js 和 npm 安装
安装完成后，打开命令提示符（Windows）或终端（Mac/Linux），执行以下命令验证安装：
node -v
npm -v
如果正确安装，将分别显示 Node.js 和 npm 的版本号。
安装 Vue CLI
Vue CLI 是一个官方提供的脚手架工具，用于快速搭建 Vue 项目。以下是安装步骤：
npm install -g @vue/cli
安装完成后，你可以使用以下命令检查 Vue CLI 是否安装成功：
vue --version
创建 Vue 项目
使用 Vue CLI 创建一个新的 Vue 项目：
vue create my-vue-project
这将启动一个交互式命令行界面，引导你选择项目配置。以下是一些重要的选项：
- ** preset (预设)**: 选择一个预设，例如 “Manually select features”（手动选择功能），这将允许你自定义项目配置。
- Project name (项目名称): 输入你的项目名称。
- Add Router (添加路由): 是否在项目中添加 Vue Router。
- Add Vuex (添加 Vuex): 是否在项目中添加 Vuex。
- Add Vue Test Utils (添加 Vue Test Utils): 是否在项目中添加 Vue 测试工具库。
选择完成后，Vue CLI 将自动创建项目并安装所有必要的依赖。
项目结构
创建项目后，你将看到一个标准的文件结构：
my-vue-project/
├── node_modules/
├── public/
│ └── index.html
└── src/
├── assets/
├── components/
├── main.js
└── App.vue
public/index.html
这是你的项目的主页面模板。
src/main.js
这是项目的入口文件，它负责初始化 Vue 实例。
src/App.vue
这是 Vue 应用的根组件。
src/components
这个文件夹包含你的自定义组件。
使用 Vue CLI 运行项目
在项目目录中，执行以下命令启动开发服务器：
npm run serve
直接执行 Vue 项目
要直接执行 Vue 项目，你可以在 package.json 文件中定义一个脚本来执行你的应用：
"scripts": {
"start": "vue-cli-service serve",
"build": "vue-cli-service build",
"serve": "vue-cli-service serve",
"build:prod": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
}
要构建生产环境的代码，可以使用以下命令：
npm run build:prod
这将生成一个可部署到生产服务器的静态文件。
总结
通过以上步骤，你已经从零开始学习了 Vue，并掌握了如何直接执行 Vue 项目。Vue 提供了一个简洁且强大的工具链，使得构建单页应用变得容易和愉快。随着你对 Vue 的深入了解，你可以开始探索更多的高级特性，如 Vue Router、Vuex 和 Vue Test Utils。