> 文档中心 > 【脚手架VueCLI】从零开始,创建一个VUE项目

【脚手架VueCLI】从零开始,创建一个VUE项目


脚手架VueCli

文章目录

    • 脚手架VueCli
      • 一、什么是CLI
      • 二、VueCLI所需要的环境
      • 三、安装Vue脚手架
      • 四、使用`CLI2`创建项目
      • 五、项目目录结构描述
      • 六、了解runtime-only和runtime-complier的区别
      • 七、了解CLI3

一、什么是CLI

CLI:Command-Line Interface(命令行界面),俗称脚手架
VueCLI可以帮助我们快速开发Vue开发环境以及对应的webpack配置。

二、VueCLI所需要的环境

运行VueCLI需要电脑中已经安装好了NodeJSNPM命令。

NPM:Node Package Manager(NodeJS包管理工具)

在搭建脚手架之前,我们需要先把webpack的基础结构给安装好。

命令:npm install webpack -g

三、安装Vue脚手架

命令:npm install @vue/cli -g

如果出现文件无法被替换删除的情况,先使用命令:npm cache clean --force
然后再使用指令:npm install @vue/cli -g --force


上述命令安装的应该是CLI的4的版本,4的版本基本上与3的功能一致。
如果我们需要使用旧版的vue init功能,可以安装一个全局的桥接工具。

命令:npm install @vue/cli-init -g

CLI 2创建webpack项目:

vue init webpack myPorject(myPorject这个是项目名)

CLI3创建webpack项目:

vue create myProject

四、使用CLI2创建项目

使用命令后,在真正创建项目之前,有些选项需要我们进行一些设置,具体如下:

  • Project name (my-project):(项目名不能使用大写)这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车
  • Project description (A Vue.js project): 项目描述,也可直接点击回车,使用默认名字
  • Author (xxx): 作者,输入你的大名
  • vue build (Use arrow keys):选择默认的就成Runtime + Compiler: recommended for most users
  • install vue-router:是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y” 或者直接回车即可。
  • Use ESLint to lint your code? 是否使用ESLint?(ESlint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。) 默认使用,这样会生成相关的ESLint配置。
  • Pick an ESLint preset Standard: 接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,直接y回车
  • Setup unit tests? (是否安装单元测试)
  • Setup e2e tests with Nightwatch:(是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景)
  • Should we run 'npm install' for you after the project has been created?(项目创建完成之后使用npm命令来进行包管理)是否使用安装依赖的包。
  • 全部选择好回车生成项目了

五、项目目录结构描述

build  //构建脚步目录,保存一些webpack的初始化配置config  //构建配置目录,项目初始化的配置,包括端口号等node_modules  //npm加载的项目依赖的模块src  //源码目录,这里是我们要开发的目录,基本上要做的事情都在这个目录里- assets  //资源目录,用来放置图片,如logo等 - components  //组件目录,用来放组件文件- router  // 路由配置- app.vue  //是项目入口文件- main.js   //是项目的核心文件static   //文件夹用来放置静态资源目录,如图片、字体等。test   //初始测试目录,可删除.babelrc babel   //编译参数,vue开发需要babel编译 .gitignore    //用来过滤一些版本控制的文件,比如node_modules文件夹 index.html   //是首页入口文件,你可以添加一些 meta 信息或统计代码啥。 package.json   //是项目配置文件,记载着一些命令和依赖还有简要的项目描述信息 README.md    //项目的说明文档,markdown 格式,介绍自己这个项目的

六、了解runtime-only和runtime-complier的区别

我们使用脚手架初始化两个项目,编译方式分别使用runtime-only(左边)runtime-complier(右边)。可以发现,他们的main.js的代码有一些区别。

【脚手架VueCLI】从零开始,创建一个VUE项目
其主要的区别在于在加载组件的使用运用了两种不同的方法。一种是直接注册组件,而另外一种使用render方法进行加载。要了解这两个方式的差异,我们首先要了解两种方式渲染网页的方法。

runtime-compiler:vue的运行过程会将 template --解析–>成抽象语法树(ast)–编译成–> render函数—>虚拟dom树---->渲染成真实dom。
runtime-only:render函数—>虚拟dom—>真实dom。runtime-only跳过了template解析成抽象语法树的步骤,代码量更少,性能更高。

在runtime-compiler中删除components属性和template,增加render函数也可以实现runtime-only一样的效果。
【脚手架VueCLI】从零开始,创建一个VUE项目

七、了解CLI3

CLI3和CLI2的差别还是很巨大的。在CLI3中移除了目录中的Config、Build和static目录,新增了public目录。并且把index.html移动到了public目录之中。并在CLI3增加了一个图形界面,我们可以通过图形界面来控制整个项目。

启动命令:vue ui

了解CLI3中目录结构以及文件的含义后,体验脚手架的图形管理页面即可。

全民K歌