Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】

本文链接：https://blog.csdn.net/muziqwyk/article/details/125829332

脚手架的基本使用

初始化脚手架

说明

Vue 脚手架（CLI）是 Vue 官方提供的标准化开发工具（开发平台），.vue文件需要脚手架帮忙转换翻译浏览器才认识
最新版本 5.x，用最新版本
文档：https://cli.vuejs.org/zh/

具体步骤
解决npm warn config global --global, --local are deprecated. use --location=global instead.
第一步（仅第一次执行）：全局安装@vue/cli

npm install --location=global @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建目录
在这里插入图片描述

vue create xxxx

然后选择在这里插入图片描述

第三步：启动项目（对项目进行编译初始化）

npm run serve

在这里插入图片描述
按两个ctrl+c停掉这个

备注

如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org
Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的webpakc 配置，请执行：vue inspect > output.js

分析脚手架结构

在这里插入图片描述

执行顺序：
在vscode终端（ctrl+~）执行了npm run serve -> 来到maxin.js引入App.vue -> 来到App.vue 引入组件School ->maxin.js里面创建实例对象将App放入容器里index.html

里面组件的名字要用驼峰法！！！

main.js 代码

// 该文件是整个项目的入口文件

// 引入Vue
import Vue from 'vue'
// 引入App组件，他是所有组件的父组件
import App from './App.vue'

// 关闭Vue的生产提示
Vue.config.productionTip = false

// 创建vue实例对象 ---vm
new Vue({
   
  el:'#app',
  // 完成了这个功能：将App组件放入容器中
  render: h => h(App),
})

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">
  <!-- 配置页签的图标 -->
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- 配置网页的标题 -->
  <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>

render函数

关于不同版本的 Vue

vue.js与vue.runtime.xxx.js的区别：
（1）vue.js是完整版的Vue，包含：核心功能+模板解析器。
（2）vue.runtime.xxx.js是运行时版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项所以在new Vue的时候不能写template，需要使用render函数接收到的createElement函数去指定具体内容。