网站首页 > 基础教程正文

vue.js 脚手架安装和使用（vue脚手架怎么使用）

ccvgpt 2024-11-17 07:27:41 基础教程 5 ℃

项目完毕之后

核心内容：<div id="app"></div>

我们在之前第一个案例的时候，有html5的定义，定义完毕之后，有script,针对div#app的渲染。现在这个渲染放在了main.js里面，通过框架来实现一个html、js的分离操作，使页面更加简单，逻辑更加清晰。

import Vue from 'vue' 相当于之前的script src=’vue.js’

import App from './App.vue' 引用组件？都有啥呢？？？

import router from './router' 引用一个路由配置

Vue.config.productionTip = false 暂时不用管

new Vue({

router,

render: h => h(App)

}).$mount('#app')； //这个还是之前的绑定操作

App.vue组件

<template> 组件的定义

<nav> 导航标签

下面的定义是路由链接设置,router-link,Home,About的定义从router下的index.js来找到定义。

<router-link to="/">Home</router-link> |

<router-link to="/about">About</router-link>

</nav>

<router-view/>

</div>

</template>