用我们自己的方式写关于Vue框架开发环境搭建的教程

前端

2023-12-08 04:47:02

基于Webpack4的Vue移动端开发环境搭建

在使用Vue开发单页面的时候，我们大多数时候都是使用的官方CLI工具，现在的Vue CLI已经迭代到了4.X了，可以说很成熟稳定了，能满足大多数要求，而且上手简单。本着折腾摸索的精神，还是打算自己搭建一个开发环境，熟悉各个流程。

一般来说，Vue开发环境大体都会分成两部分：

node环境
Vue项目

所以搭建Vue开发环境的第一步，是要安装Node.js和npm。

第一步：安装Node.js和npm

下载并安装Node.js。
安装完成后，在命令行中输入node -v和npm -v，确保Node.js和npm都已正确安装。

第二步：初始化Vue项目

打开命令行工具，进入需要创建项目的位置。
输入npx vue-cli create my-project，其中my-project是你想要创建的项目的名称。
选择你想要的预设选项，通常选择默认选项即可。

第三步：安装依赖并启动项目

进入项目目录，输入cd my-project。
安装项目依赖，输入npm install。
启动项目，输入npm run serve。

第四步：编写代码

在src目录中找到App.vue文件。
在该文件中添加以下代码：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>