前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架

文章目录

  • Vue-cli
  • Vue项目-创建
  • Vue项目-目录结构
  • Vue项目-启动
  • Vue项目-配置端口
  • Vue项目开发流程


Vue-cli

介绍:Vue-cli 是 Vue 官方提供的一个脚手架,用于快速生成一个 Vue 的项目模版
前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架_第1张图片

  • 安装 NodeJS
  • 安装 Vue-cli
npm install -g @vue/cli

Vue项目-创建

前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架_第2张图片

图形化界面

前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架_第3张图片

Vue项目-目录结构

前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架_第4张图片

src 下

前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架_第5张图片

Vue项目-启动

npm run serve

Vue项目-配置端口

vue.config.js中
前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架_第6张图片

Vue项目开发流程

默认页面 index.html 与 入口文件 main.js
前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架_第7张图片
render 的作用是:将 App 中所定义的视图创建出虚拟的 DOM 元素,挂载到 #app 对应的区域

VUE 项目中以 .vue 结尾的都称为组件文件。每个组件由三部分组成:、

VUE 组件
前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架_第8张图片

你可能感兴趣的:(Vue相关,vue.js,前端框架,前端,vue-cli)