Vue Cli学习笔记

VueCLI是官方的命令行工具,用于快速搭建Vue.js项目,它集成了Webpack配置,提高了开发效率。文章介绍了VueCLI的安装、使用,包括VueCLI2和3的初始化项目区别,以及项目目录结构、渲染函数的使用。还提到了国内用户可以使用cnpm加速npm包的安装,并详细阐述了Vue运行过程中的解析和渲染机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue Cli

  • 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI

  • 使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。

    • 如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。
  • CLI是什么意思?

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

Vue Cli的使用前提-Node

  • 安装NodeJS

    • 可以直接在官方网站中下载安装.

    • 网址: http://nodejs.cn/download/

  • 检测安装的版本
    默认情况下自动安装Node和NPM

 node -v

Node环境要求8.9以上或者更高版本

  • 什么是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]
    

Vue Cli的使用前提-webpack

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

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

    npm install webpack -g    
    

Vue Cli的使用

安装脚手架:

npm install -g @vue/cli

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

image-20220630171224720

  • Vue CLI2初始化项目

    npm install -g @vue/cli-init
    # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
    vue init webpack my-project
    
  • Vue CLI3初始化项目

    vue create my-project
    

创建Vue Cli2项目

image-20220630172728344

image-20220630192333314

目录结构详解

image-20220630202842814

不使用Eslint验证

image-20220630210304091

Runtime-Compiler和Runtime-only的区别

image-20220630213152252

  • 如果在之后的开发中,你依然使用template,就需要选择Runtime-Compiler
  • 如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only

image-20220630213325875

image-20220630213435117

Vue运行过程

parse:解析

ast:抽象语法树(abstract syntax code,AST)

image-20220630213613111

render函数的使用

main.js

new Vue({
  el: '#app',
  // components: { App },
  // template: '<App/>'
  render: (createElement) => {
    // 使用方式一: return createElement('标签', '相关数据对象(可以不传)', ['内容数组'])
    // return createElement('div', {class: 'box'}, ['我是div中的内容'])
    // 嵌套render函数
    return createElement('div', {class: 'box'}, [createElement('h2', {class: 'h2box'}, ['我是render函数里面嵌套的h2'])])
  }

})

使用方式二:

const cpn = Vue.component('cpn', {
  template: '<div>我是cpn组件</div>',
  data () {
    return {}
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // components: { App },
  // template: '<App/>'
  render: (createElement) => {
    // 使用方式一: return createElement('标签', '相关数据对象(可以不传)', ['内容数组'])
    // return createElement('div', {class: 'box'}, ['我是div中的内容'])
    // 嵌套render函数
    // return createElement('div', {class: 'box'}, [createElement('h2', {class: 'h2box'}, ['我是render函数里面嵌套的h2'])])
    // 使用方式二: 传入一个组件对象
    return createElement(cpn)
  }

})

最终方式

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  // components: { App },
  // template: '<App/>'
  render: (createElement) => {
    return createElement(App)
  }
})

运行

npm run dev

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中

创建vue cli3项目

vue create 项目名

采用手动选择,配置分多个文件

image-20220630222144065

image-20220630223459106

删掉自定义配置:

image-20220630221842803

运行
npm run serve
编译
npm run build
目录结构详解

image-20220701150038025


图形化管理界面

启动命令

vue ui

img-wIpZGMnr-1657187277840)]

运行
npm run serve
编译
npm run build
目录结构详解

[外链图片转存中…(img-lrPhczga-1657187277841)]


图形化管理界面

启动命令

vue ui

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

爱写bug的小邓程序员

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

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

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

打赏作者

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

抵扣说明:

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

余额充值