1搭建
#检测npm 及vue指令
npm -V
vue -V
#vue 环境好使情况下，cmd
# cd 到指定目录
cd F:\work\demo\vueDemo\tools
# 创建文件
vue create demo1
#选择vue3 等待安装
#添加 router插件
npm install vue-router
#添加 axio插件
npm install axios
#启动项目
npm run serve
image.png
image.png
新建router路径
添加：
import { createWebHashHistory,createRouter } from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import excel from '@/components/excel'
import flow from '@/components/flow'
const routes = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/flow',
name: 'flow',
component: flow
},
{
path: '/excel',
name: 'excel',
component: excel
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
在main.js中加载
import { createApp } from 'vue'
import '/@/style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
app.vue如下
<template>
<div id="app">
<router-view/>
</div>
<!-- <img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
// components: {
// HelloWorld
// }
}
</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>
