脚手架项目创建与运行
脚手架2
创建项目 vue init webpack 项目名
运行项目 npm run dev
脚手架3
创建项目 vue created 项目名
运行项目 npm run serve
安装时 runtime-only 和 runtime-compiler
runtime-compiler 渲染过程 template -> ast -> render -> vrom ->UI
runtime-only 渲染过程 render -> vrom ->UI 性能更高 代码量更少 占用内存更少
两种挂载方式
$mount('#app') 与 el:'#app' 意义相同
脚手架3配置文件的查看
一、 在终端中使用 vue ui 命令打开Vue项目管理器
二、在node_modules/@vue 文件夹下查看
三、创建 vue.config.js 文件
module.exports = {
// 写入配置文件
}
vue-router
router-link 的属性 ：to ="url" 点击跳转到 url ;
tag属性 默认为 a 标签 可使用 tag 对其进行修改 如 tag= "button" 将其转化为按钮
replace 使浏览器返回按钮不能使用
active-class 实现点击时添加类名的更改
```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">个人中心</router-link>
<router-view></router-view>
</div>
</template>
```
懒加载
路由会定义很多页面，如果打包后都放入到一个 js 文件中会使请求时间变长,造成不好的体验。
懒加载就是把页面分到不同的 js 文件中，只有当路由访问到的时候才会加载该文件
```vue
const Home = () => import('../components/Home.vue')
```
