使用vue-cli創建vue項目

安裝vue-cli，創建基本項目
選擇步驟

一般創建成功后，提示使用下面的指令運行demo

 npm run serve

創建出的項目目錄結構

目錄結構

常見的基礎項目目錄

一般剛創建的項目是沒有router和views目錄的，需要我們自己創建。router目錄中創建index.js文件用來配置路由；vies目錄中寫頁面vue

配置router

配置router

router的index.js中配置router

import { createRouter, createWebHistory} from 'vue-router';
import Home from '../views/Home.vue'const routes = [{path: '/',name: 'Home',component: Home},{path: '/index',name: 'Index',component: ()=> import('../views/Index.vue')}
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router

然后在main.js中，使用router：

此時再次運行項目，比如，然后訪問地址后加上router中定義的地址，就會訪問到對應的頁面，比如原來的訪問是

http://localhost:8080

那么對index的訪問就是：

http://localhost:8080/index

運行問題

router未找到

當運行項目的時候提示

Can’t resolve ‘vue-router’ in  。。。。

那么需要先安裝router

npm install vue-router

eslint報錯

就是代碼不符合規范的時候會報錯，但是eslint又比較嚴格，所以我選擇關閉eslint校驗

在項目的vue.config.js文件中的module.export中添加：

lintOnSave: false

再重新運行項目

首頁顯示

一般的，首頁是顯示的App.vue的

如果想首頁想直接顯示router中配置的 ‘/’ 路徑指定的頁面，那么要在App.vue中留一個router-view來占位，將會把’/’ 路徑指定的頁面加載進來

單頁面內容替換

一般是

<router-link> 配合 <router-view/>使用

比如：

<router-link to="/myTest">test</router-link>
<router-view/>

router-link相當于一個a-href鏈接，點擊的時候，指定的頁面會加載到router-view的位置