一 创建项目
# npm 7+,需要加上额外的双短横线
npm init vite@latest demo-vite -- --template vue
cd demo-vite
npm install
npm run dev
二 在vscode 执行npm run dev 会出现第一个疑惑 Network: use `--host` to expose
//在vite.config.js 添加
server: {
host: "0.0.0.0"
}
三 引入elementui-plus
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
四 引入路由
现在不带@4会把你装3.5.2版本
npm install vue-router@4
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../page/Home.vue'),
},
]
const router = new createRouter({
history: createWebHashHistory(),
routes
})
export default router
main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/router' //router.js路径
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')
修改版 把依赖放数组里面循环list
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/router'
const app = createApp(App)
let relyOnList = [ElementPlus, router]
relyOnList.forEach((item) => {
app.use(item)
})
app.mount('#app')
五 package.json "preview": "vite preview"
1 先npm run build 打包生成dist
2 执行npm run preview
至此一次创建过程结束