返回

Vue2+Ts 创建项目，这样弄更容易上手，往下看！

前端

一、安装环境

在开始之前，你需要确保你的电脑上已经安装了以下软件：

  • Node.js
  • npm
  • Vue CLI

你可以通过以下命令来检查你的电脑是否已经安装了这些软件：

node -v
npm -v
vue -v

如果没有安装，请按照以下步骤进行安装：

  1. 安装 Node.js：
brew install node  # macOS
apt-get install nodejs  # Ubuntu/Debian
  1. 安装 npm：
brew install npm  # macOS
apt-get install npm  # Ubuntu/Debian
  1. 安装 Vue CLI：
npm install -g @vue/cli

二、创建项目

安装好环境后，就可以开始创建项目了。首先，打开终端，然后输入以下命令：

vue create my-project

这个命令会创建一个名为 my-project 的新项目。

创建好项目后，你可以在终端中输入以下命令来进入项目目录：

cd my-project

三、项目结构

进入项目目录后，你可以看到项目中的文件结构如下：

my-project
├── package.json
├── src
│   ├── App.vue
│   ├── main.js
│   └── router
│       ├── index.js
│       └── views
│           ├── About.vue
│           ├── Home.vue
├── .gitignore
├── .eslintrc.js
└── README.md
  • package.json：这是项目的配置文件，它包含了项目的基本信息，如项目名称、版本号、依赖项等。
  • src：这是项目的源代码目录，它包含了所有的源代码文件，如组件、路由、状态管理等。
  • .gitignore：这是 Git 的忽略文件，它告诉 Git 哪些文件不应该被跟踪。
  • .eslintrc.js：这是 ESLint 的配置文件，它告诉 ESLint 如何检查代码中的错误。
  • README.md：这是项目的自述文件，它包含了项目的基本信息，如项目名称、版本号、使用说明等。

四、编写代码

接下来，就可以开始编写代码了。首先，打开 src/App.vue 文件，这是一个单文件组件，它包含了组件的模板、脚本和样式。

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <p>
      <router-link to="/about">About</router-link>
    </p>
    <router-view/>
  </div>
</template>

<script>
import { Component, Vue } from 'vue'

export default class App extends Vue {
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</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>

这个组件定义了一个简单的消息，并提供了到 about 页面