vue编写移动端项目

1. 项目结构（未用vue-cli脚手架，有助理解vue的项目构建和运行过程）

2.vue的执行流程

vue运行开始，先找到main.js(里面的Vue实例)和index.html（vue要填的坑，即id="app"的div），随后main.js将vue的创建（
导入并挂载资源和路由，根组件等，
）
main.js中主要负责vue的创建，及一些资源的导入挂载，和路由的挂载

		//入口
		import Vue from '../node_modules/vue/dist/vue.js'
		//导入路由模块
		import VueRouter from 'vue-router'
		//导入vue-resource
		import VueResource from 'vue-resource'
		
		//Vue挂载路由
		Vue.use(VueRouter)
		//Vue挂载resource
		Vue.use(VueResource)
		
		//导入mui的样式文件
		import './lib/mui/css/mui.min.css'
		import './lib/mui/css/icons-extra.css'
		
		
		
		//按需导入mint-ui组件
		import {Header,Swipe, SwipeItem} from 'mint-ui'
		import 'mint-ui/lib/style.css'
		
		//导入路由模块
		import router from './router'
		
		//组件挂载到Vue
		Vue.component(Header.name,Header)
		Vue.component(Swipe.name, Swipe);
		Vue.component(SwipeItem.name, SwipeItem);
		
		
		//导入根组件
		import App from './App.vue'
		
		
		let vm = new Vue({
		    el:"#app",
		    render: c => c(App),
		    router 
		})

注意:index.js中并未导入main.js

那index.html与main.js怎么建立联系的？
这个就归功于webpack的插件

html-webpack-plugin

简单地说，html-webpack-plugin就是在webpack打包的时候动态的将js插入到html中
html-webpack-plugin使用是，虚在webpack.config.js中配一下，配置如下：

这里也上比较全的webpack打包需要的loader加载器配置

      rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','scss-loader']},
            {test:/\.(jpg|png|gif|jpeg|bmp)$/,use:['url-loader?limit=9800&name=[hash:8]-[name].[ext]']},
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:"url-loader"},
            {test:/\.js$/,use:"babel-loader",exclude:/node_modules/},
            {test:/\.vue$/,use:"vue-loader"}
        ]

3.本vue项目的一些依赖