2.1 Vue 初始Vue-cli

了解Vue-cli
  • vue-cli是vue.js的脚手架,是一个基于Vue.js进行快速开发的完整系统,用于自动生成vue.js + webpack的项目模板,分为两种:
    • vue init webpack-simple 项目名
    • vue init webpack 项目名
  • vue-cli可以快速构建单页应用,但涉及内容很多,如 webpack、npm、nodejs等。
Vue CLI 系统包含的组件:
  • CLI 是一个全局安装的npm包,提供了终端里的vue命令
  • CLI服务 它是一个npm包,局部安装在每个@vue/cli创建的项目中。
  • CLI插件 向你的Vue项目提供可选功能的npm包,例如Babel/TypeScript转译、ESLint集成、单元测试和end-to-end测试等
基于Vue-cli快速构建
  1. 安装Node.js
  2. 下载服务器框架
  3. 实现一个静态服务器

项目结构

项目名称作用
buildwebpack相关配置文件,使用 npm run * 时其实执行的就是这里的文件
config配置文件,执行文件需要的配置信息
src资源文件,所有的组件以及资源、页面入口文件等
static静态文件目录
test测试文件目录
.babelrcbabel配置文件,比如可以解析高版本的js代码(ES6、ES7、ES8…)
.editorconfig规定编辑器有哪些要求,比如缩进两个空格还是四个空格
.eslintignore自动过滤一些不需要代码检测的文件
.eslintrc.js配置ES语法检测
.gitignore配置git可忽略的文件
index.html入口文件
package.jsonnode配置文件,对项目的描述
README.md对项目的简单介绍
webpack与Vue-cli
Webpack:前端资源模块化管理和打包工具
  • 可以将很多松散的模块,按依赖和规则打包成符合生产环境部署的前端资源;
  • 可以将按需加载的模块进行代码分割,等实际需要的时候再异步加载。
Vue-cli:脚手架工具
  • 用配置好的模板迅速搭建项目工程,省去自己配置 webpack配置文件的基本内容。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

痴心的萝卜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值