Vue中cli的创建方法

Vue命令的使用

1.使用cli3创建一个项目	vue create 项目名称
2.vue自动配置插件	vue 自动配置插件
3.使用GUI进行vue项目的安装	vue ui
4.使用cli2创建一个项目	标准版： vue init webpack 项目名称 简易版： vue init webpack-simple 项目名称

0. nvm的安装

概念	管理node.js版本的工具，可以让不同的项目使用不同的版本
安装方式	使用github的安装包，https://github.com/select-better/nvm-windows
查看node版本	nvm ls

1.npm的安装

概念	npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等
安装方式	使用nvm进行安装 nvm use 版本号安装node，安装好就可以了

2.yarn的安装

概念	yarn 是类似于npm的一个包管理器–facebook出版
优点	1.yarn 可以保证我们项目中以来的版本的一致性 2.安全
安装方式	$ npm i yarn -g
配置国内镜像源：	$ yarn config set registry https://registry.npm.taobao.org
基本使用命令	yarn add 插件名 yarn remove 插件名 yarn init
借助package.json安装项目依赖	yarn

3.cnpm的安装

cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm

• 因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

• 安装并配置国内镜像源：npm install -g cnpm --registry=https://registry.npm.taobao.org

4.Vue的cli安装

概念	Vue自动构建项目的脚手架工具
yarn安装	yarn add @vue/cli @vue/cli-init global cli全局安装
cnpm安装	cnpm i @vue/cli @vue/cli-init -g
检验安装是否成功	命令行 输入 $vue，有输出命令提示，证明安装成功

使用cli创建项目

1.cli3版本的创建–2种方式

• 方式1：命令创建【推荐】

  ​ 步骤1：vue create 项目名称

  ​ 步骤2：选择手动配置，下面的第二个

  • default 默认配置

  • Manually select features 手动选择配置

    步骤3：选择配置项

  • babel 优雅降级 es6 —> es5

  • eslint js语法检测

  • CSS Pre-processors css 预处理语言 less

  • Linter / Formatter eslint / jslint

    • Unit Testing 单元测试
    • E2E Testing 端到端的测试

  步骤4：选择css的语言配置

  • In dedicated config files 将所选的每一个选项