前言
系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. Vue 脚手架(CLI)
Vue 脚手架(CLI)是 Vue 官方提供的标准化开发工具（开发平台）
vue cli的特点：
- 开箱即用
- 基于 webpack
- 功能丰富且易于扩展
- 支持创建 vue2 和 vue3 的项目
2. Vue CLI 的安装
vue-cli 是基于 Node.js 开发出来的工具，因此需要使用 npm 将它安装为全局可用的工具。
2.1 全局安装 Vue CLI
如果出现下载缓慢可以将下载地址配置为淘宝镜像：
npm config set registry https://registry.npm.taobao.org
npm i -g @vue/cli
2.2 检验是否安装成功
查看 Vue CLI 的版本，检验 Vue CLI 是否安装成功.
vue --version
或者
vue -V
能查看安装的 Vue CLI 的版本，即为安装成功。
3. 使用 Vue CLI 创建项目
Vue CLI 提供了创建项目的两种方式：
-
基于命令行的方式创建 vue 项目
vue create 项目名称 -
基于可视化面板创建 vue 项目
vue ui
3.1 基于命令行的方式创建 vue 项目
基于命令行的方式创建 vue 项目，可以使用 Vue CLI 提供的默认预设，也可以自己手动进行预设的配置。
如果之前有自己手动进行预设的配置，并且将配置的预设进行保存，也可以选择直接使用之前的预设配置。
3.1.1 使用 Vue CLI 提供的默认预设创建 vue2 项目
vue create vue_my_test1
键盘上下箭头按键进行选择，enter确定选择
进入创建的项目的目录
cd vue_my_test1
运行项目
npm run serve
访问项目页面
http://localhost:8080/
3.1.2 手动配置预设创建 vue2 项目
步骤1：在终端下运行 vue create 命令
vue create vue_my_test2
步骤2：选择要安装的功能
步骤3：选择 vue 的版本
由于选择安装的功能不同，接下来的选择个数会有所不同
步骤5：使用上下箭头选择如何存储插件的配置信息
通常选择把插件的配置信息存储到单独的文件
步骤6：是否将刚才的配置保存为预设
根据需要选择是否保存
项目创建完成
运行项目
cd vue_my_test2
npm run serve
3.2 停止项目运行
停止项目运行: ctrl + c
3.3 基于可视化面板创建 vue 项目
进入可视化面板
vue ui
3.3.1 创建 vue2 项目
这里只演示手动配置项目
4. 分析脚手架创建的项目结构
以使用脚手架创建项目后自带的hello项目为例
4.1 项目文件目录
4.2 package.json
4.3 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),
// 指定vue控制的容器
}).$mount('#app')
4.3.1 render()
在main.js中使用render()函数将App组件放入容器中，是由于在脚手架中默认引入的vue不是完整的vue，而是缺少模板解析器的vue。
vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
模板解析器是用于解析vue配置项中的template配置项。将vue中的模板解析器去除后，可以节省项目的占用空间，同时也更加符合逻辑，因为项目构建后已经是浏览器可以解析的html、css、js等文件，不再需要模板解析器。
render()的完整写法：
//创建Vue实例对象---vm
new Vue({
// 将App组件放入容器中
// 简写,由于此函数不需要使用this，可以写成箭头函数
// 然后再对箭头函数进行简写
// render: h => h(App),
// 完整写法
render(createElement) {
// render函数接收一个创建页面元素的createElement函数，
// 用于创建页面元素
// render()函数将创建的元素返回，再将其放入容器中
return createElement(App)
}
// 指定vue控制的容器
}).$mount('#app')
//创建Vue实例对象---vm
new Vue({
// 将App组件放入容器中
// 简写,由于此函数不需要使用this，可以写成箭头函数
// 然后再对箭头函数进行简写
// render: h => h(App),
// 完整写法
// render(createElement) {
// render函数接收一个创建页面元素的createElement函数，
// 用于创建页面元素
// render()函数将创建的元素返回，再将其放入容器中
// return createElement(App)
// }
render(createElement) {
// 创建返回 <h1>hello world</h1>
return createElement('h1', 'hello world')
}
// 指定vue控制的容器
}).$mount('#app')
App组件外的其他组件使用模板<template>标签能够被放入页面，是由于vue脚手架为其配置了模板编译的第三方包。
4.4 App.vue
// 框架
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
// 交互
<script>
//引入组件
import HelloWorld from './components/HelloWorld.vue'
// 向外默认导出本组件
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
// 样式
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
4.5 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文件夹所在的路径，防止项目部署后出现路径的错误-->
<!-- 所以在该html文件中路径不使用 ./ ../ -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 网页的标题 -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- 浏览器不支持js，页面会显示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>
<%= htmlWebpackPlugin.options.title %>会到项目的package.json文件中寻找项目的name配置项
5. 修改默认配置
5.1 查看项目的默认配置
Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，终端运行：
vue inspect > output.js
5.2 修改项目的默认配置
可以修改的配置项以及如何修改可以参考官网：
Vue CLI 官网 配置参考
在项目文件夹下新建 vue.config.js 文件，要修改的配置项都写在该文件中。vue脚手架会将修改的配置项与默认的配置项进行整合。
只要在 vue.config.js 文件中修改了配置项，就要重新启动项目。
vue.config.js 文件中不能什么配置都不写，要么不写不创建 vue.config.js 文件，要么创建了 vue.config.js 文件就要写配置项，至少一个。
5.2.1 修改入口文件名
// 使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// 选项
pages: {
index: {
// 入口
entry: 'src/my_main.js'
}
}
})
5.2.2 关闭代码语法检查
// 使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// 选项
pages: {
index: {
// page 的入口
entry: 'src/my_main.js'
}
},
// 关闭语法检查
lintOnSave: false
})
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
