Vue项目创建

Vue高级 - cli

vue项目的快速构建工具 cli 【 脚手架 】

​ 底层 webpack

1. 什么是cli?

   cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack

2. cli目前有哪些版本？

   cli2 cli3

   cli3对电脑的配置有一定要求

3. cli如何使用？

   1. cli的安装 【 推荐使用yarn 】
      npm/cnpm/yarn 都可以使用 【 yarn 配置国内镜像 】

      $ cnpm i yarn -g

      使用国内镜像加速npm和yarn
      npm config set registry=https://registry.npm.taobao.org
      yarn config set registry https://registry.npm.taobao.org
      下载cnpm：npm install -g cnpm –registry=https://registry.npm.taobao.org

      1. $ yarn add @vue/cli global 这个是cli3的版本
         如果我们还想使用cli2的脚手架，那么我们可以在安装一个包

         cli3 @vue/cli

         cli2 vue-cli 【 不要安装 】

         所以一个电脑只能装一个

         问题： 如果我们同时想使用 cli2 和 cli3 怎么办呢？

      2. $ yarn add @vue/cli-init global

      如果安装3失败了，
      那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init

      1. $ cnpm i @vue/cli -g 这个是cli3的版本
         如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
      2. $ cnpm i @vue/cli-init -g

      
       如果还有问题：
         那么你就不要使用cli3了，你可以单独安装cli2 【 先卸载cli3,重启电脑 】 
      
      

      $ cnpm i vue-cli -g

   2. 验证是否安装成功
      命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功

   3. 创建项目

      cli3版本创建

      1. 命令创建 【 推荐 】
         $ vue create project

         • 手动选择配置
         • 如果安装node-sass出问题，如何解决：
           • 先切换成npm源 nrm use npm
           • 使用cnpm 安装 cnpm i node-sass sass-loader -D

      2. 图形界面创建
         $ vue ui

         cli3两种形式创建的结果是一样的

      cli2版本创建

      1. 标准版
         $ vue init webpack project
      2. 简易版
         $ vue init webpack-simple project