2020-03-23

庚子鼠年 己卯月 乙丑日

描述

vue复习，项目搭建......

技术博客：

随笔

vue项目介绍

init 与 create

vue init是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。
示例：vue init webpack myproject
cli2的项目详解：https://www.cnblogs.com/yanxulan/p/8978732.html
vue create是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。
示例：
在项目文件夹中输入命令vue create myproject
详情见：https://www.jianshu.com/p/5e13bc2eb97c
vue-cli3启动服务自动打开浏览器配置 (原文链接：https://blog.csdn.net/Hello_yihao/article/details/86518598)
1.首先创建一个vue-cli3项目。
2.找到package.json文件
3.找到配置项‘scripts’
4.找到配置项‘serve’
5.修改下，加个字段 “serve”: “vue-cli-service serve --open”
 
迁移：vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

构建项目

vue init webpack hello
vue create hello

目录结构

|vue-proj
|	|node_modules  项目依赖
|	|public
|	|	| 图标、单页面.html
|	|src
|	|	|assets  静态文件(img、css、js)
|	|	|components	 小组件
|	|	|views  页面组件
|	|	|App.vue  根组件
|	|	|main.js  主脚本文件
|	|	|router.js  安装vue-router插件的脚本文件 - 配置路由的
|	|	|store.js  安装vuex插件的脚本文件 - 全局仓库 - 数据共享
|	|配置文件们
|	|README.md  关键命令说明

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false;

// 2.x
new Vue({
  el: '#app',
  router: router,
  render (fn) {return fn(App)}
})
// 3.x
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router（路由）

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/index'

Vue.use(VueRouter);

const routes = [
  {path:'/', component:Index, name:'主页'}
];

export default new VueRouter({
  routes
});

模块

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

模块导入报错--报错信息**

 You are using the runtime-only build of Vue where the template compiler is not available.

解决:vue.config.js

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js'
      }
    }
  }
}

vue-插槽

<!-- 模板 -->
Vue.component('navigation-link', {
  template: `
  <a>
    <h6>slot</h6>
    <slot></slot>
  </a>
  `
})

<!-- 使用 -->
<navigation-link> Your Profile</navigation-link>
<!--
说明：加了<slot></slot>，navigation-link中间的文字不会被覆盖，不加会全部覆盖。

具名插槽

参考博客：https://www.jianshu.com/p/b0234b773b68

官方地址：https://cn.vuejs.org/v2/guide/components-slots.html

//  组件（父）
  <my-component>
    <template v-slot:header>
      <p>头部</p>  
    </template>
    <template v-slot:footer>
      <p>脚部</p>
    </template>
    <p>身体</p>
  </my-component>

//  组件内部（子）
    <div class="child-page">
        <h1>子页面</h1>
        <slot name="header"></slot>
        <slot></slot>  //  等价于 <slot name="default"></slot>
        <slot name="footer"></slot>
    </div>

//  渲染结果
    <div class="child-page">
        <h1>子页面</h1>
        <p>头部</p>
        <p>身体</p>
        <p>脚部</p>
    </div>

注意三点

• 具名插槽的内容必须使用模板包裹
• 不指定名字的模板插入匿名插槽中，推荐使用具名插槽，方便代码追踪且直观清楚
• 匿名插槽具有隐藏的名字"default"
• 父类调用的时候用名字决定插槽是否使用

vue-router

https://router.vuejs.org/zh/guide/

动态路由匹配

{ path: '/user/:id', component: User }
--------使用--------------
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

vux使用配置

module.exports = {
  configureWebpack: config => {
  // vux 相关配置,使用vux-ui
    require('vux-loader').merge(config, {
      options: {},
      plugins: ['vux-ui'],
      resolve: {
        alias: {
          vue$: 'vue/dist/vue.esm.js'
        }
      }
    })
  }
}