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
- 使用: