Vue-cli代码详解

119 阅读1分钟

一、src文件夹

image.png

(1)assets

存放静态文件的,里面会放一些比如js,css,图片之类的。

(2)components

存放组件的

这里面的HelloWorld.vue

image.png

(a)一个.vue文件由什么组成:template(模板)、js(script)、style(样式)

(b)template:一个模板里面只能有一个父节点,比如我们这里的class为hello的父节点div,他没有其他的兄弟节点。

(c)script:vue通常使用es6来写这部分,然后使用export default导出,他里面可以写比如data,mounted,methods等等。其中,data一定要用return来返回。

(d)style:跟我们写样式表一样,都是使用来包裹,不过,他这里是默认影响全局的,也就是说回影响到包含他的所有页面。这里的使用的是局部的,语法是<style scoped></style>,scoped的意思就是只作用于当前页面,不影响其他页面。

(3)router

这里展示的是router文件夹下的index.js,很明显,是路由的配置文件。 image.png

(a)引入部分 image.png (b)使用路由依赖

image.png

(c)配置路由

image.png

(4)APP.vue

image.png

<router-view/>这是用来展示路由页面内容的。如果想跳转的话就使用<router-link to='xxx'></router-link>

(5)main.js

image.png 是这个工程的入口文件,使用了es6的模块化引入模块,他的作用就是引入vue框架,根组件及路由,以及定义vue实例。