《基础篇第4章：vue2基础》：使用vue脚手架创建项目
原创
@toc
4.1初始化脚手架
4.1.1说明
- Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
- 最新的版本是4.x
- 官网文档：https://cli.vuejs.org/zh/
- CLI：Command Line Interface
4.1.2具体步骤
<font color='red'>第一步（仅第一次执行）：</font>全局安装@vue/cli。
npm install -g @vue/cli
<font color='red'>第二步：</font>切换到你要创建项目的目录，然后使用命令创建项目
vue create xxxx
<font color='red'>第三步：</font>启动项目
npm run serve
<font color='red'>备注： </font>
- 如出现下载缓慢请配置 npm 淘宝镜像：
npm config set registry https://registry.npm.taobao.org
- 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组成部分
<font color='red'>注意点1：</font>\<meta http-equiv="X-UA-Compatible" content="IE=edge"> 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面
<font color='red'>注意点2：</font>\<meta name="viewport" content="width=device-width,initial-scale=1.0">开启移动端的理想视口
<font color='red'>注意点3：</font>\<link rel="icon" href="<%= BASE_URL %>favicon.ico">配置页签图标，其中vue页面为了避免部署linux后路径混乱，不使用./ ../之类的路径，而使用<%= BASE_URL %>，它代表public下面的路径
<font color='red'>注意点4： </font>\<noscript>当浏览器不支持js时noscript中的元素就会被渲染
<font color='red'>注意点5：</font><%= 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函数
<font color='red'>注意点0：</font>
问题：render:h=>h(App)是干什么用的？
<font color='red'>答案</font>：render函数的作用就是将App那个vue组件渲染成DOM节点。
<font color='red'>注意点1：</font>
问题： 图1默认引入vue文件究竟引入了哪个？
<font color='red'>答案：</font>如图2中第6行指定了默认引入的vue是哪个版本的，默认引入的是运行版vue.js(也就是残缺版vue.js，它没有模板解析器)
<center>图1</center>
<center>图2</center>
<font color='red'>注意点2：</font>为啥vue提供了那么多版本？直接只提供一个最完整版的vue.js不好吗？
答案：vue.js最全版包括“核心功能+模板解析器”，而运行版不包括“模板解析器”，区别点在项目开发好用webpack打包成浏览器认识的东西后“模板解析器”就没用了，但是它还占内存大小，为了简洁提供了不同精简版的vue.js文件
<font color='red'>注意点3：</font>import导入默认vue.js，如图3实例化vue时如果使用template属性会报错，报错如图4。
解决方案有2种，方案1：引入完整版vue.js，方案2：在继续使用运行版vue.js的基础上，使用render函数也可以解决问题。
<center>图3</center>
<center>图4</center>
<font color='red'>注意点4：</font>既然vue实例化无法直接使用template属性，但vue模板中却可以直接使用\<template>标签？
<font color='red'>答案：</font>vue专门为\<template>标签找到了一个库去解析，如图5，其中21行专门用来解析vue组件中的\<template>标签，而js中的template属性它不管。
<font color='red'>注意点5：</font>简写版 render: h => h(App)，完整版如图6，其中createElement其实是一个函数，因为参数都在组件中，所以只需绑定app即可，即：简写版就变成了 render: h => h(App)
<center>图6</center>
4.1.6修改默认配置
修改默认配置可以修改很多种配置功能，比如：修改主入口main.js的名称，修改ESLint是否格式校验等等。
<font color='red'>注意点1：</font>
问题：main.js是入口，为啥它是入口，我改名叫peiqi.js为入口是否可以？
<font color='red'>答案：</font>Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置， 请执行：vue inspect > output.js，如图红框指定的就是主入口文件，但是你想直接在output.js文件修改主入口名字为peiqi.js无效
<font color='red'>注意点2：</font>
问题：默认哪些文件可以改名字会生效，哪些不能改名字？
<font color='red'>答案：</font>如图，5个红框名字不能修改，其他的都可以修改
<font color='red'>注意点3：</font>如果想实现修改入口名称或者关闭ESLint格式校验，使用图2中vue.config.js可以对脚手架进行个性化定制，详情见图1：https://cli.vuejs.org/zh
<center>图1</center>
<center>图2</center>
<font color='red'>注意点4：</font>vue.config.js最后解析成commonjs暴露格式，而不是ES6的暴露格式
<font color='red'>注意点5：</font>有的人在vue.config.js中index里面，把index里面的注释掉提前预留位置方便后续需要再展开，从而设置为空值如图1，这样会报错如图2
<center>图1</center>
<center>图2</center>
<font color='red'>注意点6：</font>每次vue.config.js文件内容修改后，都需要重启npm run serve才能生效
<font color='red'>注意点7：</font>图1和图2没关系，图1是往Vue中添加属性或修改属性，用来调整vue库工作模式的，而图2中用来调整脚手架工作模式的。
<center>图1</center>
<center>图2</center>
本人其他相关文章链接
1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点
7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）
9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）
13.vue2知识点：组件的props属性、非props属性、props属性校验
16.vue2知识点：动态组件
17.vue2知识点：混入
19.vue2知识点：全局事件总线（GlobalEventBus）
23.vue2知识点：路由
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新增编辑按钮
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
