cli 的安装,cli的目录介绍,安装问题解决,.vue文件--单文件组件
cli
-
cli是什么?
- cli是vue提供的一个快速(自动化) 构建项目的一个脚手架 ,类似于我们之前所学的 express-generator
- 用于Vue.js开发的标准工具
-
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
$ cnpm i @vue/cli -g
这个是cli3的版本
如果我们还想使用cli2的脚手架,那么我们可以在安装一个包$ 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版本创建
- 标准版
$ vue init webpack project
- 简易版
$ vue init webpack-simple 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不编译
- 总结:
- cli3 的 webpack 配置放在了node_modules 的 @vue/cli-server 中
- cli2 的配置
- standard build目录中
- simple webpack.config.js
- 问题1: 如果我们在cli3中要进行webpack配置,怎么办?
- 分析: cli3的基础webpack 配置我们不要动 , 将来node_modules会被删除
- 解决: 新建一个vue.config.js文件进行webpack的覆盖配置
- 问题2:
- cli2 cli3 在一台电脑上不能同时装的
- cli3 不能装的话,装cli2
- 先卸载cli3
yarn remove @vue/cli global
cnpm uninstall @vue/cli global
- 重启电脑
- 先卸载cli3
- 安装cli2
cnpm i vue-cli -g
- 如果还不行,卸载node.js 重装
- cli2版本创建
- 包含部分
- .vue文件包含三个部分
- template 模板:DOM结构
- script 组件的配置项
- style 样式
- 注意:template是必须有的,script和style可以没有
- 单文件组件: 一个组件就是一个文件
- .vue文件包含三个部分
- .vue 文件命名要使用大驼峰 【推荐】 或是 - 的形式
- 举例:
- Father
- movie-box
- ContentBox MovieBox
- 举例:
- 要想在vscode编辑器中 .vue 文件代码高亮 , 安装Vetur插件
- 单文件组件使用:
1. 先创建.vue文件
2. 想在哪里使用就在哪里导入import xxx from xxx
3. 在当前组件中注册导入的组件javascript export default { components: { xxx } }
- 【HMR】 热重载: 文件修改,浏览器自动刷新
- scoped 将当前组件的样式设立独立作用域,只在当前组件中有效
<style scoped></style>