搭建一个Vue项目,需要先安装node.js。安装好后,在命令行工具中进入到项目的根目录,使用以下命令:
npm install -g vue-cli
这会安装Vue的脚手架,允许我们通过命令行生成新的项目。接下来使用以下命令来创建一个新的项目:
vue init webpack my-project
这会通过脚手架帮我们快速创建一个Vue项目的基础框架。接下来进入到项目目录并启动本地服务:
cd my-project
npm install
npm run dev
启动之后可以在浏览器中访问 http://localhost:8080,这就是我们的Vue项目的主页。我们可以在 src 目录下找到 main.js 文件,这是我们项目的入口文件。在这个文件中,我们可以渲染一个根Vue实例:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
template: ' ',
components: { App }
})
上面的代码中,我们引入了Vue和App两个组件。接下来我们创建一个根Vue实例,并传入 index.html 文件中定义的模板(通常是一个容器元素)。在这个模板中,我们会使用我们创建的App组件。
最后,我们需要在 App.vue 文件中定义一个App组件。这个组件将组成我们项目的主页框架。在这个组件中,我们通常会使用一些其他组件来组成完整的页面。
<template>
<div id="app">
<nav>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
</ul>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
上面的代码中,我们在模板中定义了一个导航栏和一个router-view元素。这个router-view将会用来展示当前的页面内容,我们会在其他组件中使用它。