前言:为什么使用CLI(command line interface)?
每次创建一个新的vue项目,都要下载webpack依赖包,创建文件目录以及各种东西,CLI是一个用于管理Vue项目的框架,用于项目代码的结构维护以及配置一条龙服务。
安装步骤:
-
安装前提
Node环境要搭建好,默认下安装node自带npm -
安装指令
如果对单独一个项目安装,直接进入项目目录,然后
npm install @vue/[email protected]
如果要全局安装,直接win + R ,cmd,然后
npm install @vue/cli -g -
CLI 3 使用
用CLI脚手架,初始化一个项目,指令
vue create projectName
|| CLI 2版本 : vue init webpack projectName
注意:若使用CLI 2版本方式创建项目,则需安装另外的@vue/cli-init 包。
项目的目录结构
其中,build和config是webpack配置相关的js文件夹;
node-modules是依赖node的相关模块;
src是开发时写代码的地方;
static是在进行打包发行时,会连带着一起生成到/dist目录的资源;
.babelrc 是ES代码转化相关的配置
.editorconfig 是管理文本代码的配置,例如缩进,字体等
.eslintignore 是 管理js代码规范的,不遵守规范才写进去
.postcssrc.js是 css转化相关代码配置
package.josn 是记录项目安装的依赖包,大概的版本
package-lock.json 是实际项目的真实版本
注意:package.json里面,版本号是这样书写的 " ^13.0.0" ,这表示实际安装的版本,可能大于13.0.0,只能是大于13.0.x;如果版本号是"~13.0.0",那么可变范围是13.x.x;