13 Vue CLI

目录

13.1 简介

13.2 安装

13.3 创建项目

13.4 项目结构

13.5 Package.json

---

13.1 简介

        Vue CLI是一个基于Vue.js进行快速开发的完整系统，在Vue3.0版本正式发布时，Vue CLI将包名由原来的vue-cli 改成了@vue/cli

        Vue CLI有3个组件

1. CLI（@vue/cli）

2. CLI服务（@vue/cli-service）

3. CLI插件

13.2 安装

npm install -g @vue.cli
# 或者
yarn global add @vue/cli

# 检查是否按照成功
vue --version

13.3 创建项目

vue create 项目名称

         手动配置选项说明如下：

选项	说明
Choose Vue version	选则Vue的版本
Babel	转码器，用于将ES6代码转化为ES5代码，从而在现有环境下执行
TypeScript	是否支持TypeScript
Progressive Web App(PWA) Support	支持渐进式Web应用程序
Router	vue-router
Vuex	vue的状态管理
CSS Pre-processors	css预处理器（如Less、Sass）
Linter/Formatter	代码风格校验和格式校验（如ESLint）
Unit Testing	单元测试
E2E Testing	端到端测试

         vue create命令中有一些可选性，可以输入vue create --help查看这些选项。具体说明如下：

-p, --preset <presetName>         #忽略提示符并使用已保存的或远程的预设选项     
-d, --deault                      #忽略提示符并使用默认预设选项
-i, --inlinePreset                #忽略提示符并使用内联的JSON字符串预设选项
-m, --packageManager <command>    #在安装依赖时使用指定的npm客户端
-r, --registry <url>              #在按照依赖时使用指定的npm registry
-g, --git [message]               #强制git初始化，并指定初始化提交信息（可选的）
-n, --no-git                      #跳过git初始化
-f, --force                       #如果目标目录存在，则覆写它
--merge                           #如果目标目录存在，则合并它
-c, --clone                       #使用git clone 获取远程预设选项
-x, --proxy <proxyUrl>            #使用指定的代理创建项目
-b, --bare                        #创建脚手架时省略新手指导信息
--skipGetStarted                  #跳过显示Get Started说明
-h, --help                        #输出使用帮助信息

13.4 项目结构

--node_modules             //项目依赖模块
--public                   //该模块下的文件不会被webpack编译压缩处理，引用的第三方库js可以放这
  --favicon.ico            //图标文件
  --index.html             //项目的主页面
--src                      //项目的主目录
  --assets                 //静态资源目录
     --logo.png            //logo图片
  --components             //编写的组件放在这个目录
     --HelloWorld.vue      //Vue CLI创建的HelloWorld文件
  --App.vue                //项目根组件
  --main.js                //程序入口文件
--.browserslistrc          //配置项目目标浏览器的范围
--.eslintrc.js             //ESLint使用的配置文件
--.gitignore               //配置在git提交项目代码时忽略哪些文件或文件夹
--bable.config.js          //Babel使用的配置文件
--package.json             //npm配置文件，其中设定了脚本和项目依赖的库
--package-lock.json        //用于锁定项目实际安装的各个npm包的具体来源和版本号
--README.md                //项目说明文件

13.5 Package.json

        package.json文件定义了项目所需的各种模块，以及项目的配置信息。

{
    "name":"helloworld",     // 项目名称
    "version":"0.1.0",       // 项目版本
    "private":true,          // 是否为私有项目
    "scripts":{
        "serve":"vue-cli-service serve",   // 运行项目
        "build":"vue-cli-service build",   // 构建项目
        "lint":"vue-cli-servive lint"      // 运行ESLint验证并格式化代码
    },
    "dependencies":{            // 依赖模块列表
        "core-js":"^3.6.5",
        "vue":"^3.0.0"
    },
    "devDependencies":{        //  开发环境依赖
        "@vue/cli-plugin-babel":"~4.5.0",
        "@vue/cli-plugin-eslint":"~4.5.0",
        "@vue/cli-service":"~4.5.0",
        "@vue/compiler-sfc":"^3.0.0",
        "babel-eslint":"^10.1.0",
        "eslint":"^6.7.2",
        "eslint-plugin-prettier":"^7.0.0-0",
        
    }
}