《基础篇第4章:vue2基础》:使用vue脚手架创建项目

在这里插入图片描述

4.1初始化脚手架

4.1.1说明

  1. Vue脚手架是Vue官方提供的标准化开发工具(开发平台)
  2. 最新的版本是4.x
  3. 官网文档:https://cli.vuejs.org/zh/
  4. CLI:Command Line Interface

4.1.2具体步骤

第一步(仅第一次执行):全局安装@vue/cli。

npm install -g @vue/cli

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

vue create xxxx

第三步:启动项目

npm run serve

备注:

  1. 如出现下载缓慢请配置 npm 淘宝镜像:

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

  1. Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置,

请执行:vue inspect > output.js

4.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:包版本控制文件

在这里插入图片描述

4.1.4 创建第一个vue项目分析index.html组成部分

注意点1:<meta http-equiv=“X-UA-Compatible” content=“IE=edge”> 针对IE浏览器的一个特殊配置,含义是让IE浏览器以最高的渲染级别渲染页面

注意点2:<meta name=“viewport” content=“width=device-width,initial-scale=1.0”>开启移动端的理想视口

注意点3:<link rel=“icon” href=“<%= BASE_URL %>favicon.ico”>配置页签图标,其中vue页面为了避免部署linux后路径混乱,不使用./ …/之类的路径,而使用<%= BASE_URL %>,它代表public下面的路径

注意点4: <noscript>当浏览器不支持js时noscript中的元素就会被渲染

注意点5:<%= htmlWebpackPlugin.options.title %>使用第三方组件,会去绑定获取package.json的name属性值

<!DOCTYPE html>
<html lang="en">
  <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">
    <!--  引入第三方样式-->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <!--  配置网页标题-->
    <title><%= htmlWebpackPlugin.options.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>

4.1.5render函数

在这里插入图片描述
注意点0:

问题:render:h=>h(App)是干什么用的?

答案:render函数的作用就是将App那个vue组件渲染成DOM节点。

注意点1:

问题: 图1默认引入vue文件究竟引入了哪个?

答案:如图2中第6行指定了默认引入的vue是哪个版本的,默认引入的是运行版vue.js(也就是残缺版vue.js,它没有模板解析器)
在这里插入图片描述

图1

在这里插入图片描述

图2

注意点2:为啥vue提供了那么多版本?直接只提供一个最完整版的vue.js不好吗?
答案:vue.js最全版包括“核心功能+模板解析器”,而运行版不包括“模板解析器”,区别点在项目开发好用webpack打包成浏览器认识的东西后“模板解析器”就没用了,但是它还占内存大小,为了简洁提供了不同精简版的vue.js文件

注意点3:import导入默认vue.js,如图3实例化vue时如果使用template属性会报错,报错如图4。
解决方案有2种,方案1:引入完整版vue.js,方案2:在继续使用运行版vue.js的基础上,使用render函数也可以解决问题。
在这里插入图片描述

图3

在这里插入图片描述

图4

注意点4:既然vue实例化无法直接使用template属性,但vue模板中却可以直接使用<template>标签?
答案:vue专门为<template>标签找到了一个库去解析,如图5,其中21行专门用来解析vue组件中的<template>标签,而js中的template属性它不管。
在这里插入图片描述
注意点5:简写版 render: h => h(App),完整版如图6,其中createElement其实是一个函数,因为参数都在组件中,所以只需绑定app即可,即:简写版就变成了 render: h => h(App)
在这里插入图片描述

图6

4.1.6修改默认配置

在这里插入图片描述
修改默认配置可以修改很多种配置功能,比如:修改主入口main.js的名称,修改ESLint是否格式校验等等。

注意点1:

问题:main.js是入口,为啥它是入口,我改名叫peiqi.js为入口是否可以?

答案:Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置, 请执行:vue inspect > output.js,如图红框指定的就是主入口文件,但是你想直接在output.js文件修改主入口名字为peiqi.js无效
在这里插入图片描述
注意点2:

问题:默认哪些文件可以改名字会生效,哪些不能改名字?

答案:如图,5个红框名字不能修改,其他的都可以修改
在这里插入图片描述
注意点3:如果想实现修改入口名称或者关闭ESLint格式校验,使用图2中vue.config.js可以对脚手架进行个性化定制,详情见图1:https://cli.vuejs.org/zh
在这里插入图片描述

图1

在这里插入图片描述

图2

注意点4:vue.config.js最后解析成commonjs暴露格式,而不是ES6的暴露格式
在这里插入图片描述
注意点5:有的人在vue.config.js中index里面,把index里面的注释掉提前预留位置方便后续需要再展开,从而设置为空值如图1,这样会报错如图2

在这里插入图片描述

图1

在这里插入图片描述

图2

注意点6:每次vue.config.js文件内容修改后,都需要重启npm run serve才能生效

注意点7:图1和图2没关系,图1是往Vue中添加属性或修改属性,用来调整vue库工作模式的,而图2中用来调整脚手架工作模式的。
在这里插入图片描述

图1

在这里插入图片描述

图2

本人其他相关文章链接

1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章:vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》:使用vue脚手架创建项目

5.vue2知识点:数据代理

6.vue2知识点:事件处理

7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)

8.vue2知识点:计算属性与监听属性

9.vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)

10.vue2知识点:非单文件组件和单文件组件

11.vue2知识点:组件is属性

12.vue2知识点:组件模板定义

13.vue2知识点:组件的props属性、非props属性、props属性校验

14.vue2知识点:组件自定义事件

15.vue2知识点:组件插槽分发

16.vue2知识点:动态组件

17.vue2知识点:混入

18.vue2知识点:浏览器本地缓存

19.vue2知识点:全局事件总线(GlobalEventBus)

20.vue2知识点:消息订阅与发布

21.vue2知识点:nextTick语法

22.vue2知识点:Vue封装的过度与动画

23.vue2知识点:路由

24.vue2知识点:vm调用待$命令介绍

25.vue组件通信案例练习(包含:父子组件通信及平行组件通信)

26.vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解

27.vue2基础组件通信案例练习:待办事项Todo-list案例练习

28.vue2基础组件通信案例练习:把案例Todo-list改写成本地缓存

29.vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件

30.vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线

31.vue2基础组件通信案例练习:把案例Todo-list改成使用消息订阅与发布

32.vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮

33.vue2基础组件通信案例练习:把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘大猫.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值