使用Vue CLI脚手架上（22th）

已于 2022-10-13 00:07:05 修改
阅读量1.5k 收藏
点赞数
文章标签： vue.js javascript webpack
于 2022-10-13 00:03:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55608297/article/details/127292620
版权

1. 初始化脚手架

1.1 说明

1.Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）
2.最新的版本是 4.x
3.文档：https://cli.vuejs.org/zh/

1.2 具体步骤

1.初始化脚手架之前还需要node.js环境，所以先安装好
在这里插入图片描述

2.下载缓慢请配置 npm 淘宝镜像：npm config set registry http://registry.npm.taobao.org
在这里插入图片描述
3.全局安装@vue/cli：npm install -g @vue/cli
安装成功
在这里插入图片描述

4.切换到你要创建项目的目录，然后使用命令创建项目：vue create xxxx

可以在cmd界面切换路径创建，也可以直接在目录内创建

5.选择使用vue的版本
在这里插入图片描述
6.启动项目：npm run serve
在这里插入图片描述

如果用的是别人的文件，那会缺少node_modules,需要自己导入一下，可以执行命令npm install安装依赖

7.暂停项目：Ctrl+C

8.Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行：

vue inspect > output.js

注意，如果查看具体的 webpack 配置时出现系统中禁止执行脚本

1.执行：get-ExecutionPolicy，回复Restricted，表示状态是禁止的
2.执行：set-ExecutionPolicy RemoteSigned
3.执行：vue inspect > output.js 生成 output.js
以管理员身份运行即可解决

1.3 分析脚手架结构

脚手架文件结构

.文件目录
├── 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: 包版本控制文件

1.src/components/School.vue（School组件）

<template>
    <div id='Demo'>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showName() {
                alert(this.name)
            }
        },
    }
</script>

<style>
    #Demo{
        background: orange;
    }
</style>

2.src/components/Student.vue（Student组件）

<template>
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                age:20
            }
        },
    }
</script>

3.src/App.vue（App组件_组件中的老大）

<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    import School from './components/School.vue'
    import Student from './components/Student.vue'

    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>

4.src/main.js（入口）

大小写千万别写错了，Vue和vue我写错了找了好久错，比如关闭生产提示那小写把我vue文件给禁用了！

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

Vue.config.productionTip = false

new Vue({
    el:'#app',
    render: h => h(App),
})

5.public/index.html（页面结构）

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高渲染级别渲染页面 -->
        <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>
        <!-- 容器 -->
        <div id="app"></div>
    </body>
</html>

1.4. render函数

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

Vue.config.productionTip = false

new Vue({
    el:'#app',
    // 简写形式
	render: h => h(App),
    // 完整形式
	// render(createElement){
	//     return createElement(App)
	// }
})

总结：

关于不同版本的函数：

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 函数去指定具体内容

1.5 修改默认配置

1.vue.config.js 是一个可选的配置文件，如果项目的（和 package.json 同级的）根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载
2.使用 vue.config.js 可以对脚手架进行个性化定制，详见

https://cli.vuejs.org/zh/config/#vue-config-js

module.exports = {
    pages: {
        index: {
            // 入口
            entry: 'src/index/main.js'
        }
    },
  // 关闭语法检查
  lintOnSave:false
}

2 ref属性

<template>
    <div>
        <h1 ref="title">{{msg}}</h1>
        <School ref="sch"/>
        <button @click="show" ref="btn">点我输出ref</button>
    </div>
</template>

<script>
    import School from './components/School.vue'
    export default {
        name:'App',
        components: { School },
        data() {
            return {
                msg:'欢迎学习Vue！'
            }
        },
        methods:{
            show(){
                console.log(this.$refs.title)
                console.log(this.$refs.sch)
                console.log(this.$refs.btn)
            }
        }
    }
</script>

效果：
在这里插入图片描述
总结：

ref属性：

1.被用来给元素或子组件注册引用信息（id的替代者）
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象（vc）
3.使用方式：
1.打标识：<h1 ref="xxx"></h1> 或 <School ref="xxx"></School>
2.获取：this.$refs.xxx

3 props配置项

1.src/App.vue

<template>
	<div>
		<Student name="李四" sex="女" :age="18"/>  // 冒号是v-bind简写，防止传过去字符串格式的数字
	</div>
</template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student}
	}
</script>

2.src/components/Student.vue

<template>
	<div>
		<h1>{{msg}}</h1>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生年龄：{{myAge+1}}</h2>
		<button @click="updateAge">尝试修改收到的年龄</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			console.log(this)
			return {
				msg:'我是一个尚硅谷的学生',
				myAge:this.age
			}
		},
		methods: {
			updateAge(){
				this.myAge++
			}
		},
		//简单声明接收
		// props:['name','age','sex'] 

		//接收的同时对数据进行类型限制
		/* props:{
			name:String,
			age:Number,
			sex:String
		} */

		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:99 //默认值
			},
			sex:{
				type:String,
				required:true
			}
		}
	}
</script>

总结：

props配置项：

1.功能：让组件接收外部传过来的数据

2.传递数据：<Demo name="xxx"/>

3.接收数据：

1.第一种方式（只接收）：`props:['name']`

2.第二种方式（限制数据类型）：`props:{name:String}`

3.第三种方式（限制类型、限制必要性、指定默认值）：

props:{
    name:{
    	type:String, //类型
        required:true, //必要性
        default:'99' //默认值
    }
}

注意：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

4. mixin混入

4.1局部混入：

src/mixin.js

export const mixin = {
    methods: {
        showName() {
            alert(this.name)
        }
    },
    mounted() {
        console.log("你好呀~")
    }
}

src/components/School.vue

<template>
    <div>
        <h2 @click="showName">学校姓名：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>   
    </div>
</template>

<script>
    //引入混入
    import {mixin} from '../mixin'
    
    export default {
        name:'School',
        data() {
            return {
                name:'尚硅谷',
				address:'北京'
            }
        },
        mixins:[mixin]
    }
</script>

src/components/Student.vue

<template>
    <div>
        <h2 @click="showName">学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>   
    </div>
</template>

<script>
    //引入混入
    import {mixin} from '../mixin'
    
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
				sex:'男'
            }
        },
		mixins:[mixin]
    }
</script>

4.2 全局混入

src/main.js:

import Vue from 'vue'
import App from './App.vue'
import {mixin} from './mixin'

Vue.config.productionTip = false
Vue.mixin(mixin)

new Vue({
    el:"#app",
    render: h => h(App)
})

总结：

mixin（混入）：

1.功能：可以把多个组件共用的配置提取成一个混入对象

2.使用方式：

1.定义混入：

const mixin = {
    data(){....},
    methods:{....}
    ....
}

2.使用混入：

1.全局混入：`Vue.mixin(xxx)`
2.局部混入：`mixins:['xxx']`

3.备注：
1.组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先。

var mixin = {
	data: function () {
		return {
    		message: 'hello',
            foo: 'abc'
    	}
  	}
}

new Vue({
  	mixins: [mixin],
  	data () {
    	return {
      		message: 'goodbye',
            bar: 'def'
    	}
    },
  	created () {
    	console.log(this.$data)
    	// => { message: "goodbye", foo: "abc", bar: "def" }
  	}
})

2.同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

var mixin = {
  	created () {
    	console.log('混入对象的钩子被调用')
  	}
}

new Vue({
  	mixins: [mixin],
  	created () {
    	console.log('组件钩子被调用')
  	}
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

5. plugin插件

src/plugin.js:（编写插件）

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

src/main.js:

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

Vue.config.productionTip = false
Vue.use(plugin,1,2,3)

new Vue({
    el:"#app",
    render: h => h(App)
})

总结：

插件：

1.功能：用于增强Vue

2.本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

3.定义插件：

plugin.install = function (Vue, options) {
        // 1. 添加全局过滤器
        Vue.filter(....)
    
        // 2. 添加全局指令
        Vue.directive(....)
    
        // 3. 配置全局混入
        Vue.mixin(....)
    
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx
    }

4.使用插件：Vue.use(plugin)

6 scoped样式

src/components/School.vue

<template>
    <div class="demo">
        <h2>学校姓名：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>   
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'尚硅谷',
				address:'北京'
            }
        }
    }
</script>

<style scoped>
    .demo{
        background-color: blueviolet;
    }
</style>

src/components/Student.vue

<template>
    <div class="demo">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2> 
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
				sex:'男'
            }
        }
    }
</script>

<style scoped>
    .demo{
        background-color: chartreuse;
    }
</style>

总结：

scoped样式：

1.作用：让样式在局部生效，防止冲突
2.写法：<style scoped>

scoped样式一般不会在App.vue中使用

山雀~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 脚手架
qq_45770253的博客
06-15 1502
1. Vue 脚手架的基本用法        Vue 脚手架用于快速生成 Vue 项目基础架构，其官网地址为：https://cli.vuejs.org/zh/ 打开选择命令提示符，安装 3.x 版本的 Vue 脚手架： // 安装最新版本的脚手架 npm install -g @vue/cli // 最新的脚手架是4.x的，有很多之前的组件不适用，所以自定义安装脚手架版本 npm install -g @vue/cli@版本号 npm install -g
手把手教你使用vue-cli脚手架(图文解析)
08-28
手把手教你使用vue-cli脚手架（图文解析） 本篇文章主要介绍了使用vue-cli脚手架的详细教程，从环境搭建到项目初始化的每一步骤都进行了详细的解析。下面是本篇文章的知识点总结： 一、Vue-cli脚手架的优势 * 有...
VUE.JS——脚手架安装
热门推荐
世界中心的专栏
02-10 2万+
使用 Vue.js 开发大型应用时，我们需要考虑代码目录结构、项目构建和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无疑效率是低下的，所以通常我们会使用一些脚手架工具来帮助完成这些事情。在 Vue.js 生态中我们可以使用 vue-cli 脚手架工具来快速构建项目。 （1） 安装之前需要检查是否已经安装NodeJS的环境 可以使用node -v检查，且需要保证安装4.
Vue脚手架
天道酬勤，厚积薄发
08-12 3900
Vue脚手架学习笔记
vue脚手架
TashuoLhy的博客
10-10 2174
vue 脚手架的安装
使用vue-cli脚手架工具搭建vue-webpack项目
12-10
为了解决这个问题，Vue 官方提供了 `vue-cli` 这个脚手架工具，它可以帮助开发者快速地生成一个包含所有必需配置的项目模板。 1. **安装Node.js环境**： 在搭建Vue项目之前，首先确保你的计算机上安装了Node.js。...
vue脚手架vue-cli的学习使用教程
08-30
"Vue CLI脚手架学习使用教程" 本篇文章主要介绍了Vue CLI脚手架的学习使用教程，包括项目结构、配置文件、依赖管理、热加载和代理服务器等内容。 项目结构 在使用Vue CLI创建项目时，项目结构如下所示： * `...
vueCli脚手架工程文件模板
11-10
总结来说，“vueCli脚手架工程文件模板”是一个包含完整开发环境配置的项目起点，让开发者能够快速开始Vue.js应用的开发，而无需从零开始配置各种工具链。了解并掌握这些核心文件和目录的作用，将有助于提升开发效率...
vue-cli脚手架的安装教程图解
12-02
vue-cli脚手架模板是基于node下的npm来完成安装，下面给大家介绍vue-cli脚手架的安装，具体内容如下所述： https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件： node在4.以上，npm在3以上，查看...
Vue (七) --------- Vue 脚手架
在森林里麋了鹿
06-25 1459
Vue 脚手架概念与基本使用
vue入门---vue脚手架
yookooi
07-25 896
vue入门---vue脚手架
vue-cli（vue脚手架）超详细教程
sonwing_for的博客
07-18 1万+
       都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。。。。（确实很烦）。vue的官方文档还是不错的，由浅到深，如果不使用构建工具确实用的很爽，但是这在实际项目应用中是不可能...
vue 脚手架
Ulrica_Amaris的博客
04-04 181
Vue CLI 什么是Vue CLI 写几个Vue的Demo程序, 那么不需要Vue CLI. 如果开发大型项目, 那么需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。 CLI是什么意思 CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架. Vue CLI是一个官方发布
使用vuecli脚手架创建一个项目
最新发布
07-10
要使用Vue CLI脚手架创建一个项目，你可以按照以下步骤进行操作： 1. 首先，确保你的系统已经安装了Node.js。你可以在命令行中运行`node -v`来检查是否已经安装。 2. 安装Vue CLI。在命令行中运行以下命令来全局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值