Vuecli2和Vuecli3初始化项目的过程,简单易懂

Vuecli2和Vuecli3初始化项目的过程,简单易懂

介绍

VueCLI 是一个基于 Vue.js 进行快速开发的完整系统,采用零配置等方式快速构建。

扩展:
CLI (Command-Line Interface),翻译为命令行界面,是一个全局安装的 npm 包,提供了终端里的 vue 命令。俗称脚手架

构建项目

全局安装

npm install –g vue-cli

Vuecli2初始化项目过程

回车进入下一步操作

初始化命令

vue init webpack projectname

  • 1

  • 2
    runtime-compiler
    runtime-only
    两者区别:
    打包之后 选择第二个会比第一个少6kb,运行效率更高
    第二个会比第一个代码量更少,推荐第二种

  • 3

  • 4
    ESLint:是一种对js代码的一种限制,可以让代码书写更规范,安装之后代码不规范编译器报错

  • 这里是选择了ESLint的下一步
    5

  • 6

  • 7

目录结构
结构

Vuecli3初始化项目过程

初始化命令

vue create projectName

  • 1
    在此就选择 Manually select features 手动选择特性


  • 2


  • 3
    在此选择vue2版本


  • 4
    这里选择 In dedicated config files 放入独立配置文件


  • 5
    如果保存了这次创建项目的步骤,到下次创建时会多出一个跟历史记录一样进行创建,具体在下面↓

  • 成功创建
    res


在这里是保存步骤后再次创建看到的样子

注意:如果保存了以上手动配置 这里会出现saveName 的选择,再次创建项目就会出现
1

想要删除这个保存按一下方法即可

  1. 首先找到这个.vuerc的配置文件
    1

  2. 打开 把里面的presets里面的内容删除即可
    2


目录结构
结构

到这里就结束了,后续还会更新vue全家桶相关,还请持续关注!
感谢阅读,若有错误可以在下方评论区留言哦!!!

猜你喜欢

转载自blog.csdn.net/qq_43775179/article/details/117524679