官方提供的 Vue 官方 标准开发工具
官方文档:https://cli.vuejs.org/zh/
Vue CLI(command line interface)脚手架
0.配置淘宝镜像 不然会很慢 甚至安装失败
npm config set registry https://registry.npm.taobao.org
1.全局安装@vue/cli
npm install -g @vue/cli
2.切换到对应目录 创建脚手架
vue create vue_projectone
输入后会选择 使用Vue的版本 2/3/自定义
bable : ES6 语法转换为 ES5
eslint : 语法检查工具 检查代码是否合理
选择好之后输入回车
进行如下 *** 作
cd 项目名npm run serve之后后开始编译代码
停止终端运行 ctrl + c 连续按两次 y/n 输入什么都会关闭
脚手架结构讲解src
main.js 整个项目的入口文件App.vue.gitignore git 忽略上传git文件的 配置babel.config.js babel的配置文件package.json npm包配置文件 serve 代码执行后直接运行 man.jsbuild 构建 css js htmllint 进行语法检查 package-lock.json 包版本控制文件README.md 教程app.vue
app.vue内容**
public => index.html
DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %>title>
head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
noscript>
<div id="app">div>
body>
html>
引入的是残缺的Vue 不含模板解析器
需要自己使用render #省体积 省空间
或者自己引入完整版vue
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
// h 官方说法是 createElement 是一个函数
// createElement("h1","你好啊") 生成你好啊
// 传入 组件 为渲染组件
render: h => h(App),
}).$mount('#app')
/*
关于不同版本的Vue:
1.vue.js 与vue.runtime.xxx.js的区别:
(1).vue.js是完整版的Vue，包含:核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement的数去指定具体内容。
*/
Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpakc配置，请执
vue inspect > output.js
// 仅仅是输出让你看的文件 在这里更改是无效的
如何自行配置？配置参考 | Vue CLI (vuejs.org)
在 package.json 同级目录下创建 vue.config.js
// Commonjs 的暴露
// node.js 使用的 commonjs的暴露 不能用ES6
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
}
关闭语法检查
lintOnSave:false //与page平级
<h1 ref="title">H1标签h1>
<School ref="sc">H1标签School> 组件标签使用
<script>
// vuecomponent 对象属性
console.log(this.$refs.title) // 获取真实dom
// 可在此处 *** 作DOM
console.log(this.$refs.sc) // 获得vc对象
script>
export default {
// 加入此项配置项 接收数据
props:['name','age','sex'],
// 第二种写法 限制类型
props:{
name:String,
age:Number,
sex:String,
}
// 第三种写法
props:{
name:{
type:String, // 指定类型
required:true, // 是否为必须的参数
default:"王二", // 不传参默认为该值
}
}
}
// props 中接收的数据无法更改 会报错
// 强行更改方法
new Vue({
props:['name','age','sex'],
data(){
return {
myAge = this.age;
}
}
// 修改 myAge 代替 age
// props 优先级更高 会优先展示
})
// props 不能传入 vue 已经使用的属性
// ref key ...
## 配置项props
功能:让组件接收外部传过来的数据
(1).传递数据:
mixin.js
//两个组件共同使用相同的配置
export const mixin = {
methods:{
alert(this.name);
}
}
export const mixin = {
data(){
return {
x:200,
y:200,
}
}
}
vue中的script
// 引入一个混合组件
import {mixin} from "../mixin";
export default {
name:"School",
// 复用配置
mixins:[minxin,mixin2],
// 数据重复
// 不破坏原有数据 将现有数据与原有数据整合 如果重复现有数据优先级更高
data(){
return{
x:300,
y:200,
}
},
// 生命周期 mounted 等挂载函数 混入会执行相同两段代码
// 来者不拒 均会执行
mounted(){
console.log("多次重复执行");
}
}
// 全局混合
// main.js 中
import {mixin} from "../mixin";
// vm 与 vc 均会执行该函数
Vue.mixin(mixin);
聚合代码 书写全局配置
在 src 添加 plugs.js
export default {
// 该参数 为 Vue的构造函数
install(Vue,x,y,z){
// 全局过滤器
Vue.filter("mySlice",fuction(value){});
// 全局指令
Vue.directive("fbind",{});
// 定义混入
Vue.mixin({});
// 给Vue原型添加方法 vm 与 vc 均能使用
Vue.prototype.hello = ()=>{alert("你好啊")};
}
}
main.js
// 引入插件
import plugs from "../plugs.js"
// 在声明 vm 之前开启插件
// 能接收多个 参数 但是第一个必须是插件名 install的第一个参数必须为 Vue
Vue.use(plugs,1,2,3)
// 全局声明之后 可在 全部 vm vc 中使用
1.传给父元素 (props传给父元素一个方法)
2.由父元素传给子元素的兄弟元素
（9. 中含其他方法 使用ref与自定义事件 与mounted）
School.vue
1.js内置事件 click keyup 等
2.自定义事件
app.vue
Student.vue
Student.vue
设计一个不在任何组件内的组件 作为全部事件的中转站
A中触发自定义事件 中转X 触发C的 *** 作
// 条件
//在所有组件都能访问的地方添加 数据对象
// 可以使用 $on $off $emit
1.windows 2.VueCompents(需要改原型)
使用 Vue 在main.js中 *** 作
VueCompent对象的____proto____指向Vue的原型对象
// 在main.js 中添加 'X' 傀儡 作为 vm / vc 可以使用 $on $emit $off
// 则傀儡必须为 Vue 实例 vm
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el:"app",
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this; //全局事件总线
}
}).$mount('#app')
// 在其他 vc 中使用全局事件总线
{
methods:{
unBind(){
// 触发事件 使用方法 $emit
this.$bus.$emit('atguigu',this.name)
// 解绑全部自定义事件
this.$bus.$off()
// 摧毁 全局事件总线 vm 实例 自定义事件解绑(全部失效)
this.$bus.$destroy()
},
},
beforDestroy(){
// 在在被摧毁之前解绑该组件 在总线中的事件
// 解绑单个自定义事件
this.$bus.$off('atguigu')
// 解绑多个自定义事件
// 传入数组
this.$bus.$off(['atguigu','...','...'])
}
}
/*
消息订阅与发布
1.订阅消息︰消息名
2.发布消息︰消息内容
*/
// 需要使用 消息订阅与发布的库
// 在各种框架里都能使用 不局限于 vue
// 有多种库存在 消息订阅与发布是一种理念
// 这里推荐 : pubsub-js
// 类似于 $bus
// 订阅消息
import pubsub from 'pubsub-js'
// 在mounted中订阅
// 需要设置id // 非vue管理必须使用箭头函数!!
const this.pubid = pubsub.subscribe("消息名",fuction(msgName,data){
// msgName 为消息名
// data 为之后的传递的参数
})
// 或者传入 在 methods 中配置的方法 this 不会出问题
const this.pubid = pubsub.subscribe("消息名",this.method);
// 在销毁前取消丁订阅 beforDistory
pubsub.unsubscribe(this.pubid);
// 发布消息
pubsub.publish('hello',666);
在DOM节点 下一次更新之后 执行回调函数
this.$nextTick(()=>{
this.$refs.editInput.forEach((element)=>{
element.focus();
})
)}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）