Day3.关于vue.cli的搭建

1.首先全局安装
npm install -g @vue/cli-service-global
2.创建项目
vue create 跟文件名

image.png

第一个为默认配置，第二个是自定义配置
在自定义配置中如果要选择的话，按空格
babel：es6转es5的工具
css pre-processors：预编译
linter/format：代码规范的检查工具，不规范就会报错
unit tesing，esetesting：测试的工具
项目里面 需要什么就配置什么
4.按回车后

image.png

选择node-sass
5.再次回车后

image.png

eslint的配置：选择standard（标准的）
6.再次回车后

image.png
是save时候检查还是提交时候检查（eslint）
选择save的时候检查
7.再次回车后
image.png

bebel，postCss,ES等这些配置放在哪里？
是单独的config里面呢还是packge.json里
8.选择单独放回车后

image.png
（你将来的项目都用这些配置吗？）选择NO
9.再次回车后
image.png
这时候已经在配置项目了（也可以用vue ui来配置（图形化））

回退版本（2.x的版本）的话就用npm install -g @vue/cli-init这个命令

10。完成生成后的目录（都是配置文件）

image.png

yarn.lock是依赖包版本的东西
postcss.config里面是自动加前缀的，babel里面也是配置的代码，这些都属于配置项
editorconfig是自己编辑器的配置
browserslistrc浏览器的列表（浏览器的兼容版本）
NODEmodule（我们项目所依赖的包）
pubilc（公共的静态文件）

src（主要代码写在这里面）

image.png

assets里面图片文件

components里面组件，以vue结尾的，也叫作单文件组件

image.png

一个单文件里面包含了html，JavaScript，css

main.js里面 image.png

render这个方法渲染的就是App这个组件，渲染给谁？通过￥mount渲染给#app，#app在public的index.html里面
div里面真正显示的是app.vue里面的这个组件，这就是脚手架帮我们做的事情

image.png

server就是运行，build的作用是打包，（html，css，js）交给浏览器去运行
运行的命令（npm run server）

运行之后里面的东西怎么渲染出来的呢？

看app.vue里面

image.png

关于组件的引入

是ES6里面的写法，引入一个模块的话用import这种方式，相当于gulp里面的require
通过export default暴露出去，定义一个组件其实就是对象，别的地方需要的话通过import去引入，
注意：组件的命名通过大驼峰的方式命名，在项目当中我们的配置一帮都装在packge。json里面
真正项目的入口是main。js，渲染到默认的APP这个组件里面，挂载到了#APP