当前位置: 首页 > news >正文

【vue2第八章】工程化开发和使用脚手架和文件结构

vue工程化开发 & 使用脚手架VUE CLI:

1,核心包传统开发模式:基于js/html/css直接引入核心包开发vue。
2,工程化开发。基于构建工具如(webpack)的环境中开发vue。

vue cli是什么:

vue cli是一个vue官方提供的一个全局的命令工具.
可以帮助我们快速的创建一个开发vue项目的标准化基础架子【集成了webpack配置】

好处

  1. 开箱即用,0配置。
  2. 内置babel等工具.
  3. 标准化.

使用步骤

  1. 全局安装(一次):yarn global add @vue/cli 或者使用npm npmi @vue/cli -g
  2. 查看vue的版本: vue --version
  3. 创建项目的架子:vue create project-name (项目名-不能用中文)
  4. 启动项目: varn serve npm run serve (找package.json)

在这里插入图片描述
1.使用vscode打开需要创建项目的文件夹。或者打开指定文件夹,在打开命令窗口。
使用vue create project-name创建demo项目。
在这里插入图片描述
要使用vue3就可以选择创建vue3项目,我这里选的vue2.
然后这里需要等待一段时间。
在这里插入图片描述

然后cd到项目文件中。cd demo 使用 npm run serve 启动项目。
启动成功按住ctrl点击链接。
在这里插入图片描述

这样一个项目的基础框架就搭建成功。

这里启动项目时为什么命令时 npm run serve
这个启动名称实在 package.json里面配置的。

在这里插入图片描述
可以将这里面的serve改为其他的单词字母,然后使用 npm run 改过之后的单词也可以成功把项目运行起来。

项目的文件结构的各个用途:
使用npm安装的vue是没有yarn.lock文件
在这里插入图片描述
项目运行流程
在这里插入图片描述

http://www.lryc.cn/news/151613.html

相关文章:

  • 建造者模式简介
  • 虚拟世界指南:从零开始,一步步教你安装、配置和使用VMware,镜像ISO文件!
  • 服务器卡顿怎么查找原因?
  • Pnpm,npm,yarn
  • Kubernetes技术--使用kubeadm快速部署一个K8s集群
  • LeetCode 45题:跳跃游戏
  • idea中设置指定图片为项目站标
  • 【【萌新的STM32学习-27--USART异步通信配置步骤】】
  • elementplus实现左侧菜单栏收缩与展开
  • VBA技术资料MF50:VBA_在Excel中突出显示前3个值
  • linux定时删除服务器日志
  • 网络地址转换技术NAT(第九课)
  • K8s 在创建pod时api-server是先找scheduler 还是controller-manager
  • 【笔记】常用 js 函数
  • 无涯教程-JavaScript - QUARTILE函数
  • ES6新特性
  • 实现通用的表单清空重置功能
  • 代码随想录 - Day31 - 回溯:组合问题
  • git文件夹内容详解
  • MVC模式分层练习
  • ORB-SLAM2算法12之单目初始化Initializer
  • 固定参数-以京东sign逆向为例
  • 在macOS 上执行sed命令报错问题
  • ARP欺骗
  • pip切换下载源(多种国内源)
  • ARM Cortex-M 的 SP
  • 【原创】鲲鹏ARM构架openEuler操作系统安装Oracle 19c
  • k8s之存储篇---数据卷-挂载
  • 无涯教程-JavaScript - TDIST函数
  • IP子网的划分