vue--vueCLI

何为CLI

■ CLI是Command-Line Interface,俗称脚手架.

■ 使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。(vue 脚手架的作用),

而通过vue-cli即可:vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。

■ Vue.js官方脚手架工具就使用了webpack模板。

安装

复制代码
npm install -g @vue/cli

创建(在当前目录下)

复制代码
npm create 项目名

运行

复制代码
npm run serve

脚手架结构

render函数

复制代码
render: h => h(App),

这样配置时:

复制代码
new Vue({
    el:"#app",
    template:'<div><App></App></div>',
    comments:{App}
  // render: h => h(App),
})
// .$mount('#app')

会解析错误:

要么使用完成版的vue.js:其包含核心功能+模板解析器

要么使用运行版的vue.runtime.xxx.js:其只有核心功能,因为没有模板解析器所以无法使用template配置项,需要render函数接收createElement函数指定具体内容

组件中使用template 则由下面去解析

复制代码
import { Vue } from './vue'  // 就是运行版的vue

解构说明

相关推荐
sunly_8 分钟前
TypeScript总结:16、面向对象速查
前端·javascript·typescript
张元清12 分钟前
React useInterval Hook:没有过期闭包的 setInterval (2026)
javascript·react.js
MXN_小南学前端12 分钟前
React超长文本域中实现“返回顶部”浮动按钮
前端·javascript·react.js
gs8014040 分钟前
解构 Cordis:面向“时空可组合性”的 TypeScript 元框架深度剖析
前端·javascript·typescript
Highcharts.js1 小时前
Highcharts大数据渲染模块Boost实战与参数最佳实践表
javascript·数据可视化·boost·highcharts·大数据渲染·加速配置·参数表
岁岁种桃花儿1 小时前
Vue核心语法第一篇:Vue是什么?
前端·javascript·vue.js
Highcharts.js2 小时前
数据可视化避坑指南 ——开发中常见图表错误与修复方案
javascript·信息可视化·数据可视化·highcharts·数据可视化避坑·修复方案
观无2 小时前
若依EasyExcel实现单元格合并
开发语言·前端·javascript
愚公搬代码2 小时前
【愚公系列】《Web应用安全》001-VMware的安装
前端·安全
xiaohaiAIgeo2 小时前
【2026年】HG/T 20656-2024化工暖通空调设计规范:新版标准的变化与影响
java·前端·javascript·科普知识