脚手架项目创建与运行

脚手架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')

```