vue脚手架_vue 博客脚手架-CSDN博客

本文链接：https://blog.csdn.net/qq_43609453/article/details/107640942

vue脚手架接webpack

- 二十九、vue脚手架

二十九、vue脚手架

1、Vue CLI2 版本

1.1、安装

npm i -g @vue/cli-init

1.2、初始化项目

vue init webpack my-project

1.3、引导初始化内容详解

在这里插入图片描述

1.4、项目结构详解

在这里插入图片描述

2、Runtime-Compiler和Runtime-only

2.1、区别

在这里插入图片描述

2.2、render和template

在这里插入图片描述

2.3、了解vue程序运行过程

在这里插入图片描述

2.4、代码展示

main.js

mport Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  render: function (createElement) {
    // 1.普通用法: createElement('标签', {标签的属性}, [''])
    // return createElement('h2',
    //   {class: 'box'},
    //   ['Hello World', createElement('button', ['按钮'])])

    // 2.传入组件对象:
    return createElement(App)
  }
})


// runtime-compiler(v1)
// template -> ast -> render -> vdom -> UI

// runtime-only(v2)(1.性能更高 2.下面的代码量更少)
// render -> vdom -> UI