Vue_00001_CLI

2024-01-06 07:20
文章标签 javascript vue frontend cli 00001

本文主要是介绍Vue_00001_CLI，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

初始化脚手架

  • 初始化脚手架步骤：

第一步（仅第一次执行）：全局安装@vue/cli。
命令：npm install -g @vue/cli

第二步：切换到要创建项目的目录，然后使用命令创建项目。
命令：vue create xxxx

第三步：启动项目
npm run serve

备注：
如出现下载缓慢请配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org

Vue脚手架隐藏了所有webpack的相关配置，若想查看具体的webpakc配置，请执行命令：vue inspect > output.js

  • 脚手架文件结构：

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

  • 关于不同版本的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.config.js配置文件说明
  1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
  2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

入门案例

main.js

//该文件是整个项目的入口文件//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false/* 
关于不同版本的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实例对象（vm）
new Vue({el:'#app',//render函数完成了这个功能：将App组件放入容器中render: h => h(App)// render:q=> q('h1','你好啊')// template:`<h1>你好啊</h1>`,// components:{App},})

App.vue

<template><div><img src="./assets/logo.png" alt="logo"><School></School><Student></Student></div>
</template><script>//引入组件import School from './components/School' //引入School组件import Student from './components/Student' //引入Student组件export default {name:'App',components:{School,Student}}</script>

School.vue

<template><div class="demo"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><button @click="showSchoolName">点击弹出学校名称</button>	</div>
</template><script>export default {name:'School',data(){return {name:'替天行道学校',address:'梁山'}},methods: {showSchoolName(){alert(this.name)}},}
</script><style>.demo{background-color: blue;}
</style>

Student.vue

<template><div class="demo"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><button @click="showSchoolName">点击弹出学校名称</button>	</div>
</template><script>export default {name:'School',data(){return {name:'替天行道学校',address:'梁山'}},methods: {showSchoolName(){alert(this.name)}},}
</script><style>.demo{background-color: blue;}
</style>

基础

ref属性

main.js

import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({el:'#app',render: h => h(App)})

App.vue

<template><div><h6 v-text="message" ref="title"></h6><button ref="btn" @click="showDOM">点击输出上方的DOM元素</button><School ref="sch"/></div></template><script>//引入School组件import School from './components/School'export default {name:'App',components:{School},data() {return {message:'欢迎学习Vue！'}},methods: {showDOM(){console.log(this.$refs.title) //真实DOM元素。console.log(this.$refs.btn) //真实DOM元素。console.log(this.$refs.sch) //School组件的实例对象。}},}</script>

School.vue

<template><div class="school"><h6>学校名称：{{name}}</h6><h6>学校地址：{{address}}</h6></div>
</template><script>export default {name:'School',data() {return {name:'替天行道学校',address:'梁山'}},}
</script><style>.school{background-color: blue;}
</style>

props配置

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产环境提示
Vue.config.productionTip = false//创建vm
new Vue({el:'#app',render: h => h(App)
})

App.vue

<template><div><Student name="潘金莲" gender="女" :age="18"/></div>
</template><script>import Student from './components/Student'export default {name:'App',components:{Student}}
</script>

Student.vue

<template><div><h3>{{message}}</h3><h6>学生姓名：{{name}}</h6><h6>学生性别：{{gender}}</h6><h6>学生年龄：{{myAge+1}}</h6><button @click="updateAge">点击修改收到的年龄</button></div>
</template><script>export default {name:'Student',data() {console.log(this)return {message:'我是替天行道的学生',myAge:this.age}},methods: {updateAge(){this.myAge++}},//简单声明接收// props:['name','age','gender'] //接收的同时对数据进行类型限制/* props:{name:String,age:Number,grnder:String} *///接收的同时对数据：进行类型限制+默认值的指定+必要性的限制props:{name:{type:String, //name的类型是字符串required:true, //name是必要的},age:{type:Number,default:99 //默认值},gender:{type:String,required:true}}}</script>

mixin混入(合)

import Vue from 'vue'import App from './App.vue'import {hunhe,hunhe1} from './mixin'Vue.config.productionTip = falseVue.mixin(hunhe)
Vue.mixin(hunhe1)new Vue({el:'#app',render: h => h(App)
})

App.vue

<template><div><Student/><hr><School/></div>
</template><script>import School from './components/School'import Student from './components/Student'export default {name:'App',components:{Student,School}}
</script>

Student.vue

<template><div><h6 @click="showName">学生姓名：{{name}}</h6><h6>学生性别：{{gender}}</h6>{{number}}，{{number1}}</div>
</template><script>import {hunhe,hunhe1} from '../mixin'export default {name:'Student',data() {return {name:'宋江',gender:'男'}},mixins:[hunhe,hunhe1]}
</script>

School.vue

<template><div><h6 @click="showName">学校名称：{{name}}</h6><h6>学校地址：{{address}}</h6>{{number}}，{{number1}}</div>
</template><script>import {hunhe,hunhe1} from '../mixin'export default {name:'School',data() {return {name:'替天行道学校',address:'梁山',number:8}},mixins:[hunhe,hunhe1],}
</script>

mixin.js

export const hunhe = {methods: {showName(){alert(this.name)}},mounted() {console.log('你好啊！')},
}export const hunhe1 = {data() {return {number:10,number1:11}},
}

插件

plugins.js

export default {install(Vue,x,y,z){console.log(x,y,z)//全局过滤器Vue.filter('mySlice',function(value){return value.slice(0,4)})//定义全局指令Vue.directive('fbind',{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value = binding.value}})//定义混入Vue.mixin({data() {return {number:10,number1:11}},})//给Vue原型上添加一个方法（vm和组件实例对象就都能用了）Vue.prototype.hello = ()=>{alert('你好！')}}}

main.js

import Vue from 'vue'import App from './App.vue'import plugins from './plugins'Vue.config.productionTip = false//应用（使用）插件
Vue.use(plugins,1,2,3)new Vue({el:'#app',render: h => h(App)
})

App.vue

<template><div><School/><hr><Student/></div>
</template><script>import School from './components/School'import Student from './components/Student'export default {name:'App',components:{School,Student}}
</script>

School.vue

<template><div><h6>学校名称：{{name | mySlice}}</h6><h6>学校地址：{{address}}</h6><button @click="test">点击测试一个hello方法</button></div></template><script>export default {name:'School',data() {return {name:'替天行道学校',address:'梁山',}},methods: {test(){this.hello()}},}
</script>

Student.vue

<template><div><h6>学生姓名：{{name}}</h6><h6>学生性别：{{gender}}</h6><input type="text" v-fbind:value="name"></div>
</template><script>export default {name:'Student',data() {return {name:'宋江',gender:'男'}},}
</script>

scoped样式

这篇关于Vue_00001_CLI的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/575627。

相关文章

Nginx实现前端灰度发布

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
HTML5 data-*自定义数据属性的示例代码

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性（data-*）提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.
阅读更多...
CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》：本文主要介绍了如何使用CSS模拟HTML的title属性，通过鼠标悬浮显示提示文字效果，通过设置`.tipBox`和`.tipBox.tipContent`的样式，实现了提示内容的隐藏和显示，详细内容请阅读本文，希望能对你有所帮助... 效
阅读更多...
前端bug调试的方法技巧及常见错误

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》：本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误
阅读更多...
Vue中动态权限到按钮的完整实现方案详解

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表（routes）1.2 修改角色与路由权限表（role_routes）二、后端接口设计
阅读更多...
Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件：四、dhtmlx
阅读更多...
Vue ElementUI中Upload组件批量上传的实现代码

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl
阅读更多...
前端知识点之Javascript选择输入框confirm用法

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》：本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为：confirm 对话框会阻塞脚本的执行，直到用户作出选择。②
阅读更多...
如何使用CSS3实现波浪式图片墙

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》：本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙，通过设置图片的垂直偏移量，并使用动画使其周期性地改变位置，可以创建出动态且具有波浪效果的图片墙，同时，还强调了响应式设计的重要性，以确保图片墙在不同设备上都能良好显示，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2