新手搭建vue环境和搭建vue项目教程

Vue.js 是当今前端界非常流行的一个渐进式 JavaScript 框架之一，它减少了开发者编写视图层代码的复杂度，帮助开发者高效快速地构建 web 应用程序。本文将详细介绍如何在本地搭建 Vue.js 环境和搭建 Vue.js 项目，具体步骤和代码示例都会涉及。

新手搭建 Vue.js 环境

在搭建 Vue.js 开发环境之前，你需要保证本地确实已经安装了以下两个环境：

• 安装了 Node.js
• 安装了 npm 包管理工具

如果没有安装，那么需要先去官网下载对应版本的 Node.js 并安装。安装完成后，安装好的 npm 包管理工具会自动被安装好。你可以打开 shell 或 cmd，检查是否存在 Node.js 及 npm 支持：

node -v
npm -v

如上述命令均能输出版本号，那么就已经准备好了 Node.js 和 npm 环境。

步骤 1. 全局安装 Vue 脚手架工具

打开命令行，输入以下命令，全局安装 Vue 的脚手架工具：

npm install -g @vue/cli

等待安装完毕后，你可以通过以下命令检查安装情况：

vue --version

步骤 2. 使用 Vue 脚手架工具创建新项目

执行以下命令来使用 Vue 的脚手架工具创建新项目：

vue create my-project

其中 my-project 是你项目的名称，你可以自定义修改。执行上述命令后，会显示以下选项：

Vue CLI v4.5.9
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Manually select features

• 默认选项会采用 Vue 2.x 版本，并搭配 babel 和 eslint。
• 手动选项可以自定义选择模板及所需配置项。

如果你不希望手动设置配置项，直接选择默认选项即可。

步骤 3. 进入项目目录

项目创建成功后，你可以使用以下命令进入项目目录：

cd my-project

步骤 4. 启动本地开发服务器

进入项目目录，执行以下命令来启动本地开发服务器：

npm run serve

启动完成后，在命令行终端会显示可访问该应用程序的 URL：

App running at:
- Local:   http://localhost:8080/
- Network: http://<your_ip>:8080/

在浏览器中访问该 URL，即可查看本地运行的 Vue.js 项目。

搭建 Vue.js 项目

在搭建好 Vue.js 开发环境后，你就可以开始在本地搭建 Vue.js 项目了。

步骤 1. 创建项目

在本地终端执行以下命令，创建一个新的 Vue.js 项目：

vue create my-project

其中 my-project 是你项目的名称，你可以自定义修改。执行上述命令后，会自动安装相关依赖，完整的项目模板会被下载，同时会创建一个基于 webpack 的脚手架。

步骤 2. 启动本地开发服务器

进入项目代码所在的目录后，可以使用以下命令启动本地开发服务器：

npm run serve

这将启动一个本地开发服务器，并在命令行中输出可访问应用程序的 URL。访问该 URL 即可在浏览器中查看应用程序。

步骤 3. 修改代码

你可以使用你喜欢的编辑器打开创建好的项目，在本地开发服务器运行时，可以修改 Vue.js 项目的代码并立即查看更改的效果。例如，在 App.vue 文件中修改页面标题，只需要像下面这样修改代码：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to My Vue.js App'
    };
  }
};
</script>

<style scoped>
  /* 修改页面样式 */
  h1 {
    color: red;
    font-size: 48px;
  }
</style>

修改完毕后，保存代码，并在浏览器中刷新页面即可查看效果。

步骤 4. 构建应用程序

当你完成对 Vue.js 项目的修改时，可以构建应用程序以发布到生产环境。在命令行中使用以下命令构建生产应用程序：

npm run build

这将在项目文件夹下创建一个 dist 目录，在其中包含了应用程序的可部署文件。

总结

通过本文讲解，希望你对如何在本地搭建 Vue.js 环境和搭建 Vue.js 项目有了全面的了解。如有任何问题，请在评论区留言，我们将第一时间回答你的问题。