Vue CLI使用

1.Vue CLI介绍

如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI。如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI,使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。

CLI是什么意思

  • CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
  • Vue CLI是一个官方发布 vue.js 项目脚手架
  • 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

脚手架长什么样子?

1.1Vue CLI使用前提

安装NodeJS

什么是NPM呢?

  • NPM的全称是Node Package Manager
  • 是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
  • 后续我们会经常使用NPM来安装一些开发过程中依赖包.

cnpm安装 由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: npm install -g cnpm --registry=https://registry.npm.taobao.org 这样就可以使用 cnpm 命令来安装模块了: cnpm install [name]

安装webpack

Vue.js官方脚手架工具就使用了webpack模板

  • 对所有的资源会压缩等优化操作
  • 它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。

Webpack的全局安装

  • npm install webpack -g

1.2Vue CLI使用

安装Vue脚手架

  • npm install -g @vue/cli

注意:上面安装的是Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。

Vue CLI2初始化项目

  • vue init webpack my-project

Vue CLI3初始化项目

  • vue create my-project

2.Vue CLI2详解

2.1Vue CLI2创建项目过程

2.2目录结构详解

2.3Runtime-Compiler和Runtime-only的区别

2.4render和template

2.5Vue程序运行过程

npm run build

npm run dev

3.Vue CLI3

vue-cli 3 与 2 版本有很大区别

  • vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3
  • vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录
  • vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化
  • 移除了static文件夹,新增了public文件夹,并且index.html移动到public中

3.1Vue CLI创建过程

3.2CLI3目录结构详解

3.3自定义配置

cli3和cli2的配置方式不同,我们可以在Service.js中进行我们的自定义配置

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 邂逅Vue.js

    运行这段程序,我们可以在浏览器中看到你好呀,那么这段程序做了些什么,为什么可以显示出来?

    说故事的五公子
  • Redis超详细总结

    在90年代,一个网站的访问量一般都不大,用单个数据库完全可以轻松应付。在那个时候,更多的都是静态网页,动态交互类型的网站不多。

    说故事的五公子
  • Vue.js学习总结——1

    双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

    说故事的五公子
  • 基于云开发开发 Web 应用(一):项目介绍 & 初始化

    Linux 中国曾在过去的 1 年内运行了一个 TL;DR 的中国版。不过当时做的版本是小程序的版本,一直以来,受限于小程序·云开发没有 Web SDK ,因此...

    白宦成
  • Vue.js快速入门

    Vue.js简介 Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设...

    xiangzhihong
  • Vue.js简介

    Vue.js简介 Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设...

    xiangzhihong
  • Vue.js 入门指南之“前传”(含sublime text 3 配置) 1,下载安装Node.js2,配置Vue环境3,Vue初探4,配置sublime Text

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指...

    用户1177503
  • vue小白快速入门

    一、vue是什么 Vue 是一套用于构建用户界面的渐进式框架。 压缩后仅有17kb 二、vue环境搭建 你直接下载并用 <script> 标签引入,Vue 会被...

    柴小智
  • vue.js快速上手

      Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。

    笔阁
  • Vue:基于Vue2的饿了么实战总结

    MrTreasure

扫码关注云+社区

领取腾讯云代金券