vue 项目的结构图
vue-cil打包生成项目文件夹的大概总览
vue-cli项目中页面相关的主要文件
index.html:
说明:一般只定义一个空的根节点,在main.js里面定义的实例将挂载在**#app**节点下,内容通过vue组件填充。
App.vue文件:
说明:app.vue是项目的主组件,所有页面都是在app.vue下切换的。
<router-view></router-view>是子路由视图,后面的路由页面都显示在此处,相当于一个指示标,指引显示哪个页面。
一个标准的vue文件,分为三部分。
1,装写html代码在<template></template>中,一般在此下面只能定义一个根节点;
//小坑提示:'只能识别一个根节点,否则会自动省略‘
2,<script></script>标签;里面用来放js逻辑代码
3,<style scoped></style>用来写样式,其中scoped表示。该style作用于只在当前组件的节点及其子节点,但是不包含子组件呦。
main.js文件:
说明:入口文件,全局配置文件,在此配置的插件在组件中都可直接使用。
router下面的index.js文件:
说明:定义路由的文件
//定义引入vue-router
import Router from 'vue-router'
//在此页面进行配置需要挂载路由的vue文件
new Routert({
routes:[{
path:'配置的路由',
name:'命名',
component:’导入的Vue文件‘
}]
})
vue-cli项目使用webpack打包
在终端输入 命令行 npm run build
成功后
默认生成dist文件夹
这里面生成的js和css文件,是以最优化的方式将代码进行合并
这些文件就是最后用来打包上线的文件