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'
}
}
})
}
}
