21 Vue.js框架基础教程

小节：搭建项目骨架与基础组件

1. 安装Vue.js

在开始之前，您需要确保您的开发环境中已经安装了Node.js和npm。可以通过以下命令检查：

node -v
npm -v

如果还没有安装，请访问 Node.js官网 进行下载和安装。

2. 创建Vue.js项目

使用Vue CLI来创建一个新的Vue.js项目。首先，全局安装Vue CLI：

npm install -g @vue/cli

接下来，使用Vue CLI创建一个新的项目。例如，我们将项目命名为 my-vue-project：

vue create my-vue-project

在创建过程中，CLI会询问您一些配置选项，您可以选择预设或手动选择。

3. 启动开发服务器

进入项目目录，并启动开发服务器：

cd my-vue-project
npm run serve

默认情况下，开发服务器会在 http://localhost:8080 运行。您可以在浏览器中访问这个地址，看到 Vue.js 的欢迎页面。

4. 项目骨架结构

创建完成后，您会看到项目的基本结构，如下：

my-vue-project/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── package.json
└── vue.config.js

• src/：所有的源代码都在这里包括组件、资产等。
• components/：用于存放Vue组件的目录。
• App.vue：服务于整个应用的根组件。
• main.js：应用程序的入口文件。

5. 创建基础组件

在 src/components/ 目录下创建一个新的组件，比如 HelloWorld.vue。

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

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.hello {
  text-align: center;
  margin-top: 60px;
}
</style>

这个组件接受一个 msg 属性，并显示在一个标题中。

6. 使用基础组件

在 App.vue 中引入并使用 HelloWorld 组件，代码如下：

<template>
  <div id="app">
    <HelloWorld msg="欢迎使用 Vue.js!" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

7. 运行项目

确保开发服务器正在运行，再次访问 http://localhost:8080，您应该可以在页面上看到 “欢迎使用 Vue.js!” 的欢迎信息。

8. 结论

通过以上步骤，您已经搭建了一个基本的 Vue.js 项目骨架，并创建了一个简单的组件。这为您后续深入学习 Vue.js 打下了良好的基础。接下来，您可以尝试创建更多的组件，学习状态管理、路由等内容，以更深入地掌握 Vue.js 框架。

总结

• 使用 npm install -g @vue/cli 安装Vue CLI。
• 使用 vue create <project-name> 创建项目。
• 启动开发服务器，访问 http://localhost:8080。
• 创建和使用基础组件，使用 props 接收参数。

在学习过程中，随时查看 Vue.js 官方文档 以获取更多帮助与指导。