腳手架項(xiàng)目創(chuàng)建與運(yùn)行
腳手架2
? ? 創(chuàng)建項(xiàng)目 vue init webpack 項(xiàng)目名?
? ? 運(yùn)行項(xiàng)目 npm run dev
腳手架3
? ??創(chuàng)建項(xiàng)目?vue created 項(xiàng)目名
? ? 運(yùn)行項(xiàng)目 npm run serve
安裝時(shí) runtime-only 和 runtime-compiler
? ?runtime-compiler? ? 渲染過程??template -> ast -> render -> vrom ->UI
? ?runtime-only? 渲染過程???render -> vrom ->UI? 性能更高 代碼量更少? 占用內(nèi)存更少
兩種掛載方式
? ??????$mount('#app') 與 el:'#app' 意義相同
腳手架3配置文件的查看
一嬉橙、 在終端中使用 vue ui 命令打開Vue項(xiàng)目管理器
二笙隙、在node_modules/@vue 文件夾下查看
三、創(chuàng)建 vue.config.js 文件
module.exports = {
? ? // 寫入配置文件
}
vue-router
router-link 的屬性 ：to ="url" 點(diǎn)擊跳轉(zhuǎn)到 url ;?
????????????????????????????????tag屬性 默認(rèn)為 a 標(biāo)簽 可使用 tag 對其進(jìn)行修改 如 tag= "button" 將其轉(zhuǎn)化為按鈕? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? replace 使瀏覽器返回按鈕不能使用
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????active-class 實(shí)現(xiàn)點(diǎn)擊時(shí)添加類名的更改
```vue
? ??<template>
????? <div id="app">
? ? ????<h2>我是組件</h2>
? ????? <router-link to="/home" tag="button" replace active-class="active">主頁</router-link>
? ????? <router-link to="/about" tag="button" replace active-class="active">個(gè)人中心</router-link>
? ? ????<router-view></router-view>
????? </div>
</template>
```
懶加載
? ??路由會(huì)定義很多頁面，如果打包后都放入到一個(gè) js 文件中會(huì)使請求時(shí)間變長,造成不好的體驗(yàn)靠益。
懶加載就是把頁面分到不同的 js 文件中，只有當(dāng)路由訪問到的時(shí)候才會(huì)加載該文件
```vue
const Home = () => import('../components/Home.vue')
```
