【Vue】三:Vue组件:Vue脚手架

文章目录

  • 1.Vue脚手架使用
  • 2.脚手架结构
  • 3. 改进之前的项目
  • 4. 脚手架默认配置
  • 5.main.js的render函数

1.Vue脚手架使用

(1)安装node.js
(2)安装脚手架
全局安装

npm install -g @vue/cli

(3)创建项目
【Vue】三:Vue组件:Vue脚手架_第1张图片
(4)编译 Vue 程序,自动将生成 html css js 放入内置服务器,自动启动服务。
执行下面两个命令:
【Vue】三:Vue组件:Vue脚手架_第2张图片
(5)打开浏览器,访问:http://localhost:8080
【Vue】三:Vue组件:Vue脚手架_第3张图片

2.脚手架结构

【Vue】三:Vue组件:Vue脚手架_第4张图片

3. 改进之前的项目

【Vue】三:Vue组件:Vue脚手架_第5张图片
组件XDemo.vue
【Vue】三:Vue组件:Vue脚手架_第6张图片
组件YDemo.vue

【Vue】三:Vue组件:Vue脚手架_第7张图片

组件App.vue
【Vue】三:Vue组件:Vue脚手架_第8张图片
【Vue】三:Vue组件:Vue脚手架_第9张图片

4. 脚手架默认配置

脚手架默认配置在 vue.config.js 文件中进行。
【Vue】三:Vue组件:Vue脚手架_第10张图片

5.main.js的render函数

【Vue】三:Vue组件:Vue脚手架_第11张图片

你可能感兴趣的:(Vue,vue.js,javascript,前端)