Vue2 —— 学习（六）

一、Vue 脚手架

（一）介绍

Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）

脚手架版本最新版本是 4.x

文档可以查看 http://cli.vuejs.org/zh/

就是vue 官网文档中的 vue.cli command line interface

（二）脚手架启动

1.全局安装

进第一次执行全局安装 @vue/cli

npm install -g @vue/cli

2.切换目录

切换到你要创建的目录然后使用命令创建项目

要在哪里使用创建脚手架就在终端进入哪个目录下不要直接就创建

vue create xxx

babel 是用来将 es6 转成 es5 的

eslint 是进行语法检查的

然后回车等待创建成功

3.启动项目

进入我们创建的脚手架 cd vue_test

然后运行

npm run serve

然后等待给我们开启了一个服务器端口是 8080 我们直接访问这个网址就行了

自己用就用第一句里面的

别人也想用就用下面的然后就创建完成了

（三）脚手架内部文件介绍

1.外层文件夹文件

.gitignore 哪些文件夹不想被git 所管理在里面写好

Babel.config.js babel 的控制文件里面用现成的配置就行不用自己写

package-lock.json

package.json 包说明书里面有文件的版本名字

里面的 serve 就是帮我们创建一个服务器进行初始化工作我们在准备阶段写的那个npm run serve命令的完整命令就是这个 build 是当我们所有代码都写完了然后要发给下一个人的时候需要 build

一下是最后进行的编译 lint 是进行语法检查

readme 就是一些注意事项

2.src 文件夹：

main.js

前面我们学习过它是我们创建的 vue 实例 vm 很重要当我们执行完前面的 npm run serve 就直接运行这个文件了该文件是整个项目的入口文件

先引入外部的 vue 直接用 import 方法就行，脚手架帮我们下载好了直接写第一句话就行

然后引入 App 组件它是所有组件的父组件

第三行是关闭 vue 的生产提示

render 那行先不看后面单独讲实现了将 App 组件放入容器中

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

assets

静态资源可以把一些图片视频放上去大家一起使用

app.vue

就不说了是放所有组件的父组件

components

把所有的子组件放进去

3.public 文件夹：

favicon.ico

网站的页签图标

index.html 我们的页面是整个应用的界面

开启移动端的理想视口

不用./ 直接使用它给的格式能避免许多错误

标签里面一长串的意思是直接去 package.json 找到 name 属性当标题是 webpack 中的插件用法

配置网页的标题

如果浏览器不支持 js 那么里面的内容就会出现到浏览器上如果支持是不渲染的

容器！

<!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><!-- built files will be auto injected --></body>
</html>

（四）render 函数

如果不用 render 的写法用之前的写法会报错的因为会提示我们没有引入完整版的 vue 引入的是残缺版的 vue，不能解析模板

1.为什么我们不用完整的 vue 来解析

因为我们只有在程序员开发的时候使用模板解析器最后的时候 webpack 直接发送解析好的文件模板解析器还在里面就多余了而且占的内存很大三分之一我们直接用残缺的加上 render 更好，让打包完的文件体积更小

2.vue.js 和 vue.runtime.xxx.js 的区别

vue.js 是完整版的 Vue 包含核心功能和模板解析器

文件名带 runtime 的都是残缺的 vue 文件没有模板解析器

esm 是使用了 es6 语法的

引入残缺的 Vue 没有模板解析器所以不能配置 template 配置项得用 render 函数来进行解析

3.用法

里面必须写 rander 函数而且必须有返回值不然会报错

而且这个函数能接受参数createElement 这个参数是一个方法，很重要能创建元素并放入内容，这样就能解析模板了

render(createElement) {return createElement('h1','你好啊') }

简化代码因为函数内部只有一个参数我们能写成箭头函数的形式只有一个返回值我们直接省略

然后参数不用那么长的我们随便定义一个变量 h 当成这个函数变量里面放上我们 App 组件即可

render: h => h(App)

（五）修改默认参数

vue inspect 能显示默认的参数值 output.js 文件打开就能查看，但是不能在这个文件里直接进行修改，这个就是给人看的并不是真的具体的配置过程

就好像 main.js 是入口函数是里面默认的参数指定的如果修改名字，就会显示我们找不到 main.js 它只认 main 这个名

红色的部分都是不能改的部分粉色可以进行任意修改但是路径也要相应的改变

所有能修改的配置项都在官网中的配置参考中别的就都不能进行修改了

如果想修改就放在 vue.config.js 文件中就在最外层

如果修改了里面的属性一定要重新启动这个服务

二、一些属性

（一）ref

用来给元素和子组件注册有用信息是 id 的替代者

就是用来标识标签的如果写在 html 标签中我们获得的是真实的 dom 元素

 <h1 ref="title"></h1>

使用下面的属性进行调用我们定义的ref 都写在 vc 的原型对象中的 $refs 的对象属性中

我们获得的是一个真实的 dom 元素

this.$refs.title

如果写在我们的组件标签一个 id 标签

  <MySchool id="sch"></MySchool>

我们获得的是 school 组件对应的完整的 dom 结构

如果我们写的是 ref 标签

  <MySchool ref="sch"></MySchool>

我们获得的是 school 组件的实例对象

this.$refs.sch

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/813595.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！