VUE入门到精通(三)：脚手架开发实例

Tyler Yue

已于 2022-04-13 17:04:37 修改

阅读量412

点赞数 1

分类专栏： # VUE 文章标签： vue.js 前端 javascript

于 2021-11-17 17:14:55 首次发布

本文链接：https://blog.csdn.net/qq_43137699/article/details/121383081

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

VUE入门到精通(三)：脚手架

1.文档: https://cli.vuejs.org/zh/

2.最新版本是4.x（与vue核心版本无关,一般选最新即可）

一、安装步骤

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

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

第三步：启动项目
》npm run serve

安装慢，配淘宝镜像

npm config set registry "https://registry.npm.taobao.org"

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

vue inspect > output.js

二、分析脚手架结构

在这里插入图片描述

1、index.html文件

<!DOCTYPE html>
<html lang="">

<head>
  <!-- BASE_URL = public 路径 -->
  <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">
  <!-- 引入第三方样式 -->
  <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
  <!-- 配置网页标题 -->
  <title>硅谷系统</title>
</head>

<body>
  <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
  <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>
  <!-- built files will be auto injected -->
</body>

</html>

2、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},
})

3、App.vue

<template>
	<div>
		<img src="./assets/logo.png" alt="logo">
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './components/School'
	import Student from './components/Student'

    //管理项目子组件的最大父组件
	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

三、脚手架自定义配置

1、vue.config.js 文件

采用commonjs模块规范

使用vue.config.js可以对脚手架进行个性化定制，会覆盖掉脚手架部分的默认webpack配置，详情见：https://cli.vuejs.org/zh

示例：

module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
	//开启代理服务器（方式一）
	/* devServer: {
    proxy: 'http://localhost:5000'
  }, */
	//开启代理服务器（方式二）
	devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000',
				pathRewrite:{'^/atguigu':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
				pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }
}

四、ref标签属性

02_src_ref属性

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

五、props配置项

功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
```
props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}
```
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

六、mixin(混入)

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

第一步定义混合：
```
{
    data(){....},
    methods:{....}
    ....
}
```
第二步使用混入：

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

七、插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件：

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}