vue样式初始化_VUE项目初始化

Vue项目初始化：

Vue项目请求生命周期和文件组件

创建vue文件：user

用户页面

export default {

name: "User",

components: {

Nav,

Footer,

},

data(){

return {

}

},

methods: {

}

}

1.入口文件：加载vue、router、store等配置 以及 加载自定义配置(自己的js、css，第三方的js、css)

2.创建项目唯一根组件，渲染App.vue，挂载到index.html中的挂载点 => 项目页面显示的就是 App.vue 组件

3.在App.vue中设置页面组件占位符

4.浏览器带着指定 url链接 访问vue项目服务器，router组件就会根据 请求路径 匹配 映射组件，去替换App.vue中设置页面组件占位符

* eg: 请求路径 /user => 要渲染的组件 User.vue => 替换App.vue中的 */

路由

小组件与路由跳转

写两个组件

Footer

这是页脚

export default {

name: "Footer"

}

.footer {

width: 100%;

height: 120px;

background-color: lightslategrey;

}

.footer p {

line-height: 120px;

text-align: center;

}

Nav

• 主页

• 用户

export default {

name: "Nav"

}

.nav {

width: 100%;