vue app项目 第一天 基本架构和路由配置

一.前言

今天开始打算花6天时间 完成一个基于vue的买菜app 在这里记录一下项目的流程和第一次做这个项目遇到的坑 以及解决的办法

二.第一步 脚手架的安装

使用npm 安装好脚手架  安装脚手架教程参考我的另一篇博客   https://www.cnblogs.com/chenglianjie/p/11976571.html

自定义安装我选择一些选项 可以根据个人需要 自己选择

 三.搭建好项目框架

根据项目 脚手架里面的内容该删删 该改的就改 下面是我的项目结构 只改了src里面的文件夹  项目里一般我们也基本只在src里面写东西

view 放页面的 

components 放view里面的一些公共组件

config 放一些全局的配置

imges 放图片的

plugins 放开发中用的插件的

router 路由拆出来

store vuex

service 服务器的一些操作

style 放样式的

四.配置路由及一些细节

1.在public下的index.html下配置浏览器上方的名称和图标

 2.配置fastclick

 npm i fastclick --save  配置完成后 可以package.json中看到

 然后在main.js中配置一下 好全局引用

在main.js里面
//1. 引入fastClick中消除300ms延迟的方法 
import FastClick from 'fastclick'

if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
  }, false);
}

 接着在main.js引入一下全局的css 相当于样式的初始化 还有就是引入ui组件库和rem设置 rem设置不懂的可以参考教程  这样这些就可以在全局使用了

//2.引入全局样式 相当于是css初始化 这里是用less写的 放在style文件夹下的
import  '@/style/common.less'
import '@/plugins/vant'
//3.引入全局ui组件库vant
import '@/plugins/vant'
// 4. 引入rem
import '@/config/rem.js'

 注意  ui组件库引入前记得去下载在依赖包里  要用什么就下什么  上面引入时是已经通过npm下载了的

路由的配置

下面的代码是router里面 index.js的 是配置路由代码的 dashboard是主面板  其他组件都放在这上面的

// 引入vue
import Vue from 'vue'
// 引入路由
import Router from 'vue-router'
// 引入一级组件 home等4个一级主页面都放在这下面的 dashboard是主面板的意思
import Dashboard from '@/views/dashboard/Dashboard'
//使用懒加载 引入其他的界面 const和箭头函数是es6中的新语法 懒加载自己下去还会继续的深入研究的
const Home= ()=> import('@/views/home/Home.vue')
const Cate= ()=> import('@/views/cate/Cate.vue')
const Cart= ()=> import('@/views/cart/Cart.vue')
const Mine= ()=> import('@/views/mine/Mine.vue')
// 使用路由
Vue.use(Router)
export default new Router({
	 routes:[
		 {path:'/',redirect:'/dashboard'}, //redirect是重定向的意思 访问根目录的时候会自动去到/dashboard
		 {path:'/dashboard',name:'dashboard',component:Dashboard,
			children:[
			 {path:'/dashboard',redirect:'/dashboard/home'},
			 {path:'home',name:'home',component:Home},
			 {path:'cate',name:'cate',component:Cate},
			 {path:'cart',name:'cart',component:Cart},
			 {path:'mine',name:'mine',component:Mine}
		 ]}
	 ]
 })

 下面是dashboard 里面的代码 底部4的导航是放在主面板的

 

第一天基本就完成了这些 把整体的一个框架已经搭好了 路由配好了 遇到一些问题就是 路由忘了写出口 和出口写错

 写错是写为了 </router-view> 

还有就是有ui框架时 看清楚点框架的用法 因为第一次用 还是出了一些问题 但是经过自己的专研还是弄出来了 哈哈 开心