Vuejs开发环境搭建及热更新【推荐】

Vuejs开发环境搭建及热更新攻略

1. 安装Node.js和npm

在开始Vuejs的开发之前，我们需要先安装Node.js。这是一款基于Chrome V8引擎的JavaScript运行环境。

在安装Node.js的时候，会自动安装npm，npm是一个可以解决Node.js插件之间依赖的包管理器。可以通过这个命令来检查是否安装成功:

node -v  //查看node版本
npm -v   //查看npm版本

如果都出现版本号，则说明安装成功。

2. 使用Vue CLI创建一个新项目

Vue CLI是Vue.js官方提供的一个脚手架，可以让我们快速搭建Vue的开发环境。

安装Vue CLI需要在命令行输入以下命令：

npm install -g @vue/cli

安装完成后，通过 vue --version 查看版本号是否正确。

接下来，我们可以使用Vue CLI创建一个新项目，通过以下命令：

vue create my-project

3. 运行Vue项目

创建项目后，我们可以通过以下命令来运行项目：

cd my-project
npm run serve

这时候你应该可以看到如下输出信息：

 App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.XXX.XXX:8080/

访问 http://localhost:8080/ 即可看到运行的效果。

4. 热更新

热更新是一个前端开发必不可少的功能，它可以及时地反映修改后的代码。

在Vue.js中实现热更新非常简单，我们只需要在项目根目录下安装vue-cli-plugin-serve插件，并在vue.config.js中增加配置即可。

安装插件：

npm install @vue/cli-plugin-serve -D

在vue.config.js中增加以下代码：

module.exports = {
  configureWebpack: {
    devServer: {
      hot: true,
      open: true, //自动打开默认浏览器
    },
  },
};

运行项目：

npm run serve

现在，每次修改代码时，浏览器都会自动刷新，并展示最新的页面内容。

示例1

（示例说明一）

假设我们在src/App.vue中增加了一行文字，

<template>
  <div>
    <h1>Vue CLI项目</h1>
    <p>欢迎来到Vue的世界~</p>
    <p>我是新加入的文字哦</p>    //新增一行文字
  </div>
</template>

运行项目后，我们可以在浏览器中看到新增的文字。

示例2

（示例说明二）

我们可以通过修改src/App.vue中的样式文件来验证热更新的功能。

<template>
  <div>
    <h1 class="title">Vue CLI项目</h1>
    <p>欢迎来到Vue的世界~</p>
  </div>
</template>
<style scoped>
.title {
  color: red;    //修改为红色颜色
  font-weight: bold;
}
</style>

运行项目后，我们可以在浏览器中看到标题已经变成了红色，说明样式已经生效了。

结语

Vuejs的开发环境搭建及热更新攻略到这里就结束了。希望这篇文章可以帮助到各位开发者，也欢迎大家留言分享使用Vuejs的心得。