1.index.html主页面
引入初始化的meta标签，初始化css和打包后的js文件等。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title></title>
<link type="text/css" href="./src/css/common.css">
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
2.入口文件 main.js
此文件是打包的入口，需要引入vue文件、路由的文件 等一些插件和静态资源，文件中初始化vue，在vue中配置好路由和引入App.vue组件。
import Vue from 'vue'
import App from './App.vue'
import router from './router/home'
var vm=new Vue({
el: '#app',
router,//配置路由的文件
render: h => h(App)//引入App.vue组件（vue2.0的写法）
});
router.beforeEach((to, from, next) => {//钩子函数
window.scrollTo(0,0);
next();
});
3.根组件App.vue
盛放所有的页面元素，路由跳转后的显示位置
<template>
<div id="app">
<!--<keep-alive>-->
<router-view></router-view>//显示路由跳转结果的标签router-view
<!--</keep-alive>-->
</div>
</template>
<script>
</script>
<style scoped>//scoped表示里边的css代码不会影响子组件的样式
@import '../public/stylesheets/common.css';//引入公共css
</style>
4.router配置文件
在此文件中先引入vue-router插件，再引入所有页面的符组件，然后进行路由配置，有多少中链接就引入多少个父组件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/home/home.vue'
import Help from '../components/home/help.vue'
Vue.use(Router);//使用Router 路由插件
export default new Router({
mode: 'history',
routes:[
{
path:'/',
redirect:'/home'//重定向
},
{ //首页
path:'/home',
component:Home，
children：[//子路由
path:'/home/help',
component:Help
]
}
]
})
5.一般.vue组件文件
编写自己的解构template script css，引入本路由要使用的插件例如axios、banner、子组件、静态函数等，进行逻辑编写。
<template>
<div class="">
<div class="home-container">//主区域
<Banner></Banner>//轮播图区域等。。。。
.....
.....
.....
.....
</div>
<m-footer></m-footer>//footer区域
</div>
</template>
<script>
import axios from 'axios'
import MFooter from '../footer.vue'
import Banner from './banner.vue'
export default {
data(){
return{
allAmount:[]
}
},
components:{
MFooter,
Banner//绑定子组件
},
created(){
//钩子函数
},
methods:{//定义一些方法
getQueryString: function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var url=decodeURIComponent(window.location.search);
var r = url.substr(1).match(reg);
if (r != null) return (r[2]);
return "";
}
}
}
</script>
<style>//引入当前页的css
@import "home.css";
</style>
6. 一般项目搭建使用vue-cli脚手架
7.文件的引入引出。采用ES6的module规范
- css一般可以采用sass或less编写，支持文件的引入@import common.css
在 .vue 文件中：
<style>@import common.css<style>//这里引入了common.js，注意路径问题。。。
<style lang="less">这里可以使用less编写css了<style>
- vue文件引入css使用ES6规范
@import XXX.css - vue文件引入其他文件使用
import XX from 'xx/xx/xx'(引入的是js文件的可以省略后缀)
8.注意组件划分（根据项目UI结构），注意模块划分（根据模块的功能）
10763884-2785fb7979fafd0e.jpg
9.静态文件的提取
公共的css，js，img等。。。
网友评论