vue3 框架创建及加载依赖包组

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>