VueCLI 脚手架I-阿里云开发者社区

VueCLI 脚手架I

2024-01-26 30

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： VueCLI 脚手架I

一、安装

第一步（仅第一次执行）：全局安装 @vue/cli

npm install -g @vue/cli

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

vue create xxxx

第三步：启动项目

npm run serve

二、小Tips

如出现下载缓慢请配置 npm 淘宝镜像：

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

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行如下命令。就会将脚手架的默认配置生成一个 output.js文件供你查看

 vue inspect > output.js

三、分析脚手架结构

当我们使用脚手架新建一个项目vue_demo时，目录结构如下

在这里插入图片描述

assets 存放 png、video等静态资源，
components 存放子组件
脚手架文件结构如下：

在这里插入图片描述

当我们运行npm run serve命令时，系统会去文件中寻找main.js入口文件，

/*
  该文件是整个项目的入口文件
 */
// 引入Vue
import Vue from 'vue'
// 引入APP组件，它是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建Vue实例对象—— —— vm
new Vue({
   
   
  // 下面这行运行代码完成这个功能，将App组件放入容器中
  render: h => h(App),
}).$mount('#app')
/*
* .$mount('#app') ==>  el:'#app'
*/

首先引入App.vue文件，在App.vue文件中再引入components文件夹下的其他vue文件，如下
在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">
    <!-- 配置图标文件的引入，<%= BASE_URL %> ，表示 public目录下-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题，<%= htmlWebpackPlugin.options.title %>表示package.json中的name -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- noscript 表示当浏览器不支持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>

四、为什么使用render函数

在我们创建vm时，使用的new Vue时，使用常规的new Vue会出现以下错误

new Vue({
   
   
    el:'app';
    template:'<h1>你好啊！</h1>`;
    components:{
   
   
        App
    }    
})

错误信息中要求我们使用完整版的vue或者使用render函数，由于在开发中使用完整版的vue占用体积相对较大，因此使用render函数【render函数中必须要有返回值】

一般的render函数写为：
render(createElement){
   
   
    return createElement('h1','你好啊！')
}

经过使用箭头函数的缩写为：

render: h => h('h1','你好啊！')

即，也可以写为：
在这里插入图片描述

因此，总结如下

在这里插入图片描述

五、修改脚手架中的默认配置

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行如下命令。就会将脚手架的默认配置生成一个 output.js文件供你查看

 vue inspect > output.js

使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh
六、ref属性

当我们在APP.vue中给各标签添加属性获取DOM值操作时，建议使用ref属性，来代替document,getElementById（‘title’）
通过ref属性获取到的值我们进行打印输出，发现，组件的DOM是组件的实例对象，而标签的DOM是真实DOM

在这里插入图片描述

因此，ref

被用来给元素或子组件注册引用信息（id的替代者）

应用在HTML标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

使用方式：
打标识：<h1 ref="xxx">...<h1>或<School ref="xxx><School>
获取：this.$refs.xxx

七、配置项props

props 实现了父组件向子组件传递数据（或方法），父组件中绑定属性（或方法），子组件中利用props接受数据（或方法）。。。若想要子组件向父组件传递数据，可利用方法传递，将参数带到方法中递回给父组件

现在有这么一个需求：在复用组件时，组件内的数据可以动态的改变，传入什么就展示什么——这就要用到props配置属性

所以，配置项props的功能就是让组件接收外部传过来的数据。

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

接收数据的方式如下

第一种：简单的声明接收【常用，只接收，对数据无特别要求】

props:['name','age','sex']

第二种：接受的同时对数据进行类型限制

props:{
   
   
    name:String,
    age:Number,
    sex:String
}

第三种：接受的同时对数据：进行类型限制 + 默认值的指定 + 必要性的限制
注意：default 与 required不能同时出现

props:{
   
   
    name:{
   
   
        type:String, // name 的类型是字符串
        required:true, // name 是必要的
    },
    age:{
   
   
        type:Number,
        default:99 // 默认值
    },
    sex:{
   
   
        type:String,
        required:true
    }
}