cli
-
cli是什么?
cli是vue提供的一个快速(自动化) 构建项目的一个脚手架 ,类似于我们之前所学的 express-generator -
cli的版本
目前最新 3.x
老版本是 2.x -
cli的底层的自动化工具是: webpack
-
cli的安装
npm/cnpm/yarn 都可以使用$ yarn add @vue/cli global
这个是cli3的版本
如果我们还想使用cli2的脚手架,那么我们可以在安装一个包$ yarn add @vue/cli-init global
如果有的同学安装3失败了,
那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
1.$ cnpm i @vue/cli -g
这个是cli3的版本
如果我们还想使用cli2的脚手架,那么我们可以在安装一个包
1.$ cnpm i @vue/cli-init -g
如果还有问题:
那么你就不要使用cli3了,你可以单独安装cli2`$ cnpm i vue-cli -g`
-
验证是否安装成功
命令行输入:$ vue
看是否有东西输出,如果输出命令提示,证明安装成功 -
创建项目
cli3版本创建
1. 命令创建 【 推荐 】
$ vue create project
- 手动选择配置
- 如果安装node-sass出问题,如何解决:
- 先切换成npm源 nrm use npm
- 使用cnpm 安装 cnpm i node-sass sass-loader -D
2. 图形界面创建
`$ vue ui`
cli2
1. 标准版
$ vue init webpack project
- 目录介绍:
- package.json 整个项目的依赖配置文件,脚本命令运行的存储文件
- build 整个项目的配置性文件,比如webpack配置
- config 对整个项目的静态服务器配置
- dist 运行 npm build 打包出来的文件
- js 项目的js文件
- .map 文件 错误资源定制文件
- html 整个项目的容器,也是根实例的模板
- node_modules 整个项目的依赖包文件
- src 源代码开发目录,也是开发者具体操作的目录
- assets 开发环境的静态资源 , webpack编译
- components 组件存放目录
- xxx.vue 一个.vue文件就是一个组件,我们称之为:单文件组件(template js style)
- App.vue 根实例的直接子组件,其他组件往App.vue中放
- main.js 整个项目的入口文件
- .babelrc 优雅降级
- .editorconfig 编辑器配置文件
- .gitignore 配置git上传时,不需要上传文件配置
- postcssrc.js css预处理器的配置
- display: flex;
- -webkit
- -moz
- -ms
- README.md 项目说明文件
- static 生产环境的静态资源 webpack不编译
2. 简易版
$ vue init webpack-simple project
总结:
cli3 的 webpack 配置放在了node_modules 的 @vue/cli-server 中
cli2 的配置
standard build目录中
simple webpack.config.js
问题: 如果我们在cli3中要进行webpack配置,怎么办?
分析: cli3的基础webpack 配置我们不要动 , 将来node_modules会被删除
解决: 新建一个vue.config.js文件进行webpack的覆盖配置
问题:
1. cli2 cli3 在一台电脑上不能同时装的
2. cli3 不能装 , 装cli2
先卸载cli3
yarn remove @vue/cli global
cnpm uninstall @vue/cli global
重启电脑
安装cli2
cnpm i vue-cli -g
如果还不行,卸载node.js 重装
vue文件 – 单文件组件
- 包含部分
.vue文件包含三个部分- template 模板:DOM结构
- script 组件的配置项
- style 样式
注意:template是必须有的,script和style可以没有
单文件组件: 一个组件就是一个文件
.vue 文件命名要使用大驼峰 【推荐】 或是 - 的形式
举例:
Father
movie-box
ContentBox MovieBox
要想在编辑器中 .vue 文件代码高亮 , 安装Vetur插件
单文件组件使用:
1. 先创建.vue文件
2. 想在哪里使用就在哪里导入
import xxx from xxx
3. 在当前组件中注册导入的组件
export default {
components: {
xxx
}
}
【HMR】 热重载: 文件修改,浏览器自动刷新
<style scoped></style>
scoped 将当前组件的样式设立独立作用域,只在当前组件中有效