vue-cli安装方法

vue-cli安装

别名 脚手架

• 作用：
  • 快速构建vue项目，底层配置使用的就是webpack
• 版本

  cli2 cli3

包管理工具优先级：yarn>cnpm>npm （npm安装的东西可以被cnpm和yarn的安装覆盖）

• 安装cli3

npm install @vue/cli -g   cli3的版本
npm install vue-cli -g    cli2的版本

yarn 安装
yarn add @vue/cli global

• 注意：同一台电脑，不兼容两个版本
• 解决：调节工具
  npm install @vue/cli-init -g
yarn add @vue/cli-init global

步骤：
1、先安装cli3
2、再安装@vue/cli-init
3、那么我们就可以自由安装cli3和cli2了

vue指令
vue 查看所有指令
vue create 项目名/ .（当前目录）
vue安装
1、vue create 项目名/ .（当前目录）
2、选择你的项目中的webpack的一些配置项
1、babel
2、css-pre css预处理语言
1、less
2、sass
3、stylus
3、上面所选的配置是往In dedicated config files（生成的单独的配置性文件） 还是往package.json放 建议使用第一个
3、目录基本介绍

• node_modules 项目的依赖包
• public 静态资源文件夹
  - favicon.ico 浏览器标题的图标
  - index.html 它是整个项目的入口文件（根实例）的模板
  - src 源代码开发目录
  - assets 当前项目开发的静态资源
  - js
  - css
  - img
  - component 项目的组件
  xxx.vue 一个.vue的文件，他就是一个组件，也是一个模块
  - App.vue 入口的主组件
  - main.js webpack中配置的主入口文件
  - .browserslistrc 项目不支持ie8及其以下
  - gitignore git上传时，不上传的文件
  - babel.config.js 优雅降级
  - package.json 当前项目的依赖包配置文件
  - postcss.config.js 给css添加引擎头前缀
  - readme.md 当前项目的说明文件
  - yarn.lock 当前项目的依赖包的第三方库的详细信息记录

安装cli2
1、vue init webpack/webpack-simple app
2、进行问题的选择
1、不安装单元测试
2、不安装e2e的测试
3、eslint自愿
安装cli2_simple版本

• 总共有4个版本
  • cli2
  • cli2简化版本
  • cli3独立性配置型文件版本
  • cli3 package.json配置项文件版本
  • webpack自定义构建项目版本（自己做的）
• cli2 vs cli3
  • cli2的webpack配置是独立在外的
  • cli3的webpack配置是放在了node_modules中，不建议我们修改原配置文件，要进行覆盖文件的配置，配置vue.config.js
• 界面安装cli3（不推荐） git（界面化操作工具 不推荐）
  • 使用：
    • 命令行输入： vue ui