vue3标准开发过程

标签：vue app router element 标准 开发 plus vue3 import

1.如何用脚手架快速新建一个vue3项目 安装vue-cli后，用如下命令创建   vue create my-vue3-project   默认创建vue3项目，直接回车即可。  

---

新建完成后，如何引入element-plus？   用Webstrom打开项目， 先运行一次npm install 然后运行npm install element-plus --save   然后打开mian.js引入element-plus

 
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';  //完整引入Element  Plus
import 'element-plus/theme-chalk/index.css'; // 引入样式文件
 
 
 
 
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 } ) //在项目上应用Element Plus
app.mount('#app')

　　

        然后新建一个页面，叫MyPage.vue，放在src/views/MyPage.vue路径下

<template>
  <el-button>我是 ElButton</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
  components: { ElButton },
  name: 'MyPage'
}
</script>

 

     

---

如何引入router？   然后我们接着要引入router npm install vue-router@4     然后在src目录下建立routes文件夹 在routes文件夹下创建index.js文件

import { createRouter, createWebHistory } from 'vue-router'
import MyPage from '@/views/MyPage'
 
 
 
 
const routes = [{
    path: '/mypage',
    component: MyPage
}]
 
 
const router = createRouter({
    history: createWebHistory(),
    routes,
})
 
 
export default router
 
 

 

   

在 main.js 中引入并注册

 
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';  //完整引入Element  Plus
import 'element-plus/theme-chalk/index.css'; // 引入样式文件
import router from './routes/index'
 
 
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 } ) //在项目上应用Element Plus
app.use(router)
app.mount('#app')
 

 

        然后去App.vue中添加<router-view></router-view> 这里如果不添加，访问任何页面都是首页。     然后就可以运行了 npm run serve   运行成功访问一下 http://localhost:8080/ 如下   再访问http://localhost:8080/mypage，发现多出来一个按钮，这里就是<router-view></router-view>被MyPage.vue的内容替换后的结果  

标签：vue,app,router,element,标准,开发,plus,vue3,import
From： https://www.cnblogs.com/lukairui/p/17509873.html