前言
vue3 已经可以放心食用了,但目前网上教程多是以TS作为基础讲解的,本文将以JS为基础搭建一个简易的vue3项目。
一、准备
1.首先需要检查Npm版本,因为需要3.0.0以上才能支持vue3.x
npm -v
2.3.0
cnpm install npm -g
npm -v
8.1.2
更新vue,建议使用 淘宝镜像
cnpm i vue@next
3.升级vue-cli,并查看版本
cnpm install -g @vue/cli
vue --version
5.0.1
二、 创建项目
1.创建项目
mkdir vue3
cd vue3
vue create hello-vu3
Vue CLI v5.0.1
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
// 通过键盘上下回车选择 Default ([Vue 3] babel, eslint)
// 当然,也可以选择Manually select features 手动选择特性
// 可以安装TS、PWA、Router、vuex等等
// 目前我们以选择1为示例
// 耐心等待,直到提示,就安装好了
Successfully created project hello-vue3.
Get started with the following commands:
$ cd hello-vue3
$ npm run serve
2.现在让我们尝试启动项目
cd hello-vue3
npm run serve
如果一切顺利,当我们访问http://localhost:8080/,我们就可以看到熟悉的vue页面了
3. 在下一步之前,先让我们关掉eslint,找到 vue.config.js 文件,添加以下代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false // 添加此行以关闭eslint
})
三、 修改项目
1.现在让我们安装router及其他依赖,并且更改文件结构
在src文件夹下新增views、router文件夹
在views文件夹下新增aPage.vue和bPage.vue
在router文件夹下新增index.js和routes.js
cnpm i vue-router
cnpm install @vue/composition-api
aPage.vue和bPage.vue新增以下代码, 请注意把两个页面的代码更换一下,为了方便,我就不把两个vue源码复制上了
<template>
<div>
// aPage.vue
我是a页面
// bPage.vue
// 我是b页面
</div>
<br/>
// aPage.vue
<button @click="pageRouter">点我去B页面</button>
// bPage.vue
//
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useRouter } from "vue-router";
export default defineComponent({
setup() {
const route = useRouter();
let pageRouter = () => {
route.push({
// aPage.vue
path: "/bPage",
// bPage.vue
// path: "/aPage",
});
};
return {
pageRouter,
};
},
})
</script>
在router/index.js文件中添加以下代码
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes.js';
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
在router/routes.js文件中添加以下代码
export default [
{
path: '/',
redirect: '/aPage'
},
{
path: '/aPage',
name: 'aPage',
component: () => import('@/views/aPage.vue')
},
{
path: '/bPage',
name: 'bPage',
component: () => import('@/views/bPage.vue')
},
]
修改APP.vue
<template>
<router-view />
</template>
<script>
export default {
}
</script>
在Main.js中使用路由
import { createApp } from 'vue'
import App from './App.vue'
import routes from './router/index';
createApp(App).use(routes).mount('#app')
2.现在我们重新启动serve,如果一切顺利,你将看到以下页面,点击 点我去B页面,将跳转到bPage.vue
npm run serve
如果我们想实现类似的布局,header做标签切换,但我们希望只有Content的内容会更新,hearder和footer都不更新,那么我们就需要实现一个容器布局
1.现在让我们在components文件夹下新增两个文件mainPage.vue、menuPage.vue
// menuPage.vue
<template>
<div class="nav">
<button @click='goAPage'>菜单a</button>
<button @click='goBPage'>菜单b</button>
</div>
</template>
<script>
import { defineComponent } from "@vue/composition-api";
import { useRouter } from "vue-router";
export default defineComponent({
setup() {
const route = useRouter();
let goBPage= () => {
route.push({
path: "/bPage",
});
};
let goAPage= () => {
route.push({
path: "/aPage",
});
};
return {
goBPage,
goAPage
}
}
})
</script>
<style lang="css" scoped>
.nav { overflow: hidden; margin-bottom: 20px; width: 100%; height: 50px; background: #2d8cf0;}
.nav button {display: inline-block; margin: 10px 30px 0 30px ; cursor: pointer; height: 30px; line-height: 30px; }
</style>
// mainPage.vue
<template>
<div>
<menu-page />
<div class="main_contant">
<router-view />
</div>
</div>
</template>
<script>
import { defineComponent } from "@vue/composition-api";
import menuPage from '@/components/menuPage.vue'
export default defineComponent({
components: {
menuPage
},
setup() {
},
});
</script>
2.修改router/routes.js
import Main from '@/components/mainPage.vue'
export default [
{
path: '/',
redirect: '/aPage'
},
{
path: '/aPage',
name: 'aPage',
component: Main,
children: [
{
path: '/aPage',
name: 'aPage',
component: () => import('@/views/aPage.vue')
}
]
},
{
path: '/bPage',
name: 'bPage',
component: Main,
children: [
{
path: '/bPage',
name: 'bPage',
component: () => import('@/views/bPage.vue')
}
]
},
]
3.现在npm run serve 启动服务,如果一起正常,就应该如下图所示。
四、结语
至此,我们就简单实现了vue3+vue-cli+router的框架项目。