Vue脚手架

目录

1.在项目文件中创建脚手架

 2.Vue脚手架结构分析

1..gitignore文件

2.babel.config.js文件

3.package.json 项目依赖文件 

 4.package-lock.json 包版本控制文件

5.src文件夹里面

1.main.js文件是整个项目的入口文件

2.assets文件夹放静态资源

3.components 放页面中的所有组件

4.App.vue组件

6.public中的index.html文件夹

---

注意点：vscode中终端的快捷方式  ctrl + ~

1.在项目文件中创建脚手架

前提是Vue脚手架需要的包提前下载过的。

1.进行项目所在文件中，并打开DOS窗口：

 2.输入指令：vue  create xxxx     xxxx表示项目名称，然后回车、

eg：vue create app1

出现下面截图类容后，用Vue2写的，就选择Vue2,然后按下回车

分析：其中：babel:表示ES6相关的JS代码转为ES5.  其中eslint：用于语法检查，看语法是否合理。

如果出现下面截图内容就是创建脚手架成功。 

 

分析：npm run serve 就是在编译代码了，且会开启一个内置的小服务器，端口号为8080

 

注意：可以在package.json中，将 serve改为dev,然后以后编译代码就是 npm run dev

 

 自己访问项目的话，两个地址都可以，小伙伴访问的话，用下面局域网那个。

这下面这个就是Vue脚手架中默认创建的一个helloworld组件。

 

 2.Vue脚手架结构分析

1..gitignore文件

2.babel.config.js文件

 

3.package.json 项目依赖文件 

项目所依赖的哪些包。

其中：npm run build  整个工程写完了，最后想变成一个浏览器能够识别的。也就是最后一次编译，才执行。

 

 4.package-lock.json 包版本控制文件

5.src文件夹里面

1.main.js文件是整个项目的入口文件

一执行 npm run serve(后面改为npm run dev)后，就执行src文件夹里面的 main.js 文件 

分析：其中的render函数作用的是：

 1.vue.js 与 vue.runtime.xxx.js的区别：

        （1）vue.js是完整版的Vue,包含:核心功能+模板解析器

        （2）vue.runtime.xxx.js是运行版的Vue,只包含：核心功能；没有模板解析器

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

2.assets文件夹放静态资源

eg：图片资源或者音频视频文件等。

3.components 放页面中的所有组件

4.App.vue组件

 App.vue组件是vm之下最大的组件，像在components文件夹里面的组件都是弟弟。

6.public中的index.html文件夹

总得流程分析：

输入npm run server(npm run dev)后，执行main.js文件 --> 引入Vue-->引入App.vue组件-->引入App.vue里面注册的子组件-->然后执行 new Vue -->通过 render: h => h(App),将App组件放入容器中