文章目录
文章参考搭建环境package.json 配置文件
配置路由
文章参考
Vue3 官方中文文档
搭建环境
安装 vue-cli 脚手架
npm install -g @vue/cli@next
创建工程
$
npm init vite-app
<project-name
>
$
cd <project-name
>
$
npm install
$
npm run dev
安装路由
cnpm i vue-router@next -D
安装Vuex
cnpm i vuex@next
-D
安装sass
cnpm i
-D sass
vscode 支持 eslint
cnpm
install --save-dev eslint eslint-loader babel-eslint eslint-friendly-formatter eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-html eslint-config-airbnb-base
参考vscode 配置nodejs项目的eslint
安装mockjs
cnpm i -D mockjs
安装axios
cnpm i -D axios
package.json 配置文件
{
"name": "vue3-vite",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.0-rc.1"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.0-rc.1",
"axios": "^0.20.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.9.0",
"eslint-config-airbnb-base": "^14.2.0",
"eslint-config-standard": "^14.1.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-html": "^6.1.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"mockjs": "^1.1.0",
"sass": "^1.26.11",
"vite": "^1.0.0-rc.1",
"vue-router": "^4.0.0-beta.11",
"vuex": "^4.0.0-beta.4"
}
}
配置路由
定义好文件目录
src/pages 存放页面组件src/router 存放路由配置信息 工程目录如下：（可以根据自己的习惯配置）
配置路由文件
import {createRouter
, createWebHashHistory
, createWebHistory
} from "vue-router"
import countIndex
from "../pages/count/countIndex.vue";
import langshanIndex
from "../pages/langshan/langshanIndex.vue";
const routes
= [
{
path
: "/",
redirect
: '/countIndex'
},
{ path
: "/countIndex", component
: countIndex
},
{ path
: "/langshanIndex", component
: langshanIndex
},
];
const router
= createRouter({
history
: createWebHashHistory(),
routes
,
});
export default router
在main.js 引用路由
import { createApp
} from 'vue'
import routerIndex
from './router/routerIndex'
import App
from './App.vue'
import './index.css'
const app
= createApp(App
)
app
.use(routerIndex
)
app
.mount('#app')
注意：这里一定要使用 文件的全名（包含文件后缀名）
在APP.vue文件中添加 <router-view >作为路由占位符
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
<router-view></router-view>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
