一.前言

今天开始打算花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框架时 看清楚点框架的用法 因为第一次用 还是出了一些问题 但是经过自己的专研还是弄出来了 哈哈 开心

vue app项目 第一天 基本架构和路由配置的更多相关文章

  1. [Vue音乐项目] 第一节 环境搭建

    1.Node安装 登录官网,下载最新版本并安装: 在我的电脑内,执行以下操作:右键->属性->高级->环境变量->系统变量->path 查看是否有node的安装路径,没有 ...

  2. vue App项目 首页

    1. 下载 npm i mint-ui -S 2. 引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(Min ...

  3. vue 重构项目第一步(vue-cli跟bootstrap)

    一.先安装jq跟bootstrap 1.因为bootstrap依赖jq,先安装jq----->npm install jquery@1.11.3 --save-dev   ----->可以 ...

  4. vue 开发系列(七) 路由配置

    概要 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将 ...

  5. 前端架构之路:使用Vue.js开始第一个项目

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发.   一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...

  6. Vue.js开始第一个项目

    前端架构之路:使用Vue.js开始第一个项目   Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...

  7. 关于vue项目管理项目的架构管理平台

    关于vue项目管理项目的架构管理平台 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/faq 31.4k 次浏览 完整项目地址: ...

  8. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  9. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

随机推荐

  1. JS获取当前完整的url地址以及参数的方法

    javascript 获取当前 URL 参数的两种方法: //返回的是字符串形式的参数,例如:class_id=3&id=2& function getUrlArgStr(){ var ...

  2. 并行通信芯片8255A学习总结

    并行通信接口8255A AB口为两个数据端口,C口可以作为数据端口也可以作为状态端口 8255A是一个40引脚的双列直插式芯片 引脚如下 D0-D7:双向数据信号线. RD:读信号线. WR:写信号线 ...

  3. Spring 之初识IOC和DI

    下载Spring jar包 Spring官网 下载地址 Sping核心jar包 IOC简介 IOC:控制反转,指以前程序自己创建对象,现在将创建对象的控制权交给了第三方(Spring)了 IoC底层实 ...

  4. 【Python还能干嘛】爬取微信好友头像完成马赛克拼图(千图成像)~

    马赛克拼图 何谓马赛克拼图(千图成像),简单来说就是将若干小图片平凑成为一张大图,如下图路飞一样,如果放大看你会发现里面都是一些海贼王里面的图片. Our Tragets 爬取所有微信好友的头像

  5. RAC环境查询JOB正在运行的信息

    需求: 客户环境12.2.0.1,三节点RAC需要,将一个正在运行的Job session kill掉, 但是通过DBA_JOBS_RUNNING发现,无法发现其它实例运行的JOB,因此需要登陆多台实 ...

  6. Python文本转化语音模块大比拼,看看青铜与王者的差别!

    文本转语音 如果把Python比喻成游戏中的一个英雄,你觉得它是谁?对于Dota老玩家来说,我会想到钢琴手卡尔!感觉Python和卡尔一样,除了生孩子什么都可以做的角色.日常生活中,我们会涉及到很多语 ...

  7. 【开发者portal在线开发插件系列四】数组 及 可变长度数组

    基础篇 基础场景见上面两个帖子,这里单独说明数组和可变长度数组的用法. 话不多说,开始今天的演(表)示(演) Profile和插件开发 添加一个string类型的属性: 在插件里添加一条数据上报消息: ...

  8. markdown使用方法介绍

    markdown使用方法介绍 最近在更新微信公众号的时候发现有很多格式无法编辑尤其是涉及到代码的,每次都要截图贴上去,费时费力.穷则生变,研究了markdown格式,果然豁然开朗,一片新的天地瞬间打开 ...

  9. Redis 中的数据库

    前面我们花了很多的时间介绍了 redis 中基本的数据结构,及其内部的实现情况,这些都是非常基础的东西,可能不经意间你就会用到他们,希望你花点时间了解一下. 接下来,我们将走近 redis 数据库,学 ...

  10. Swoole高效跟传统的web开发有什么区别?

    一.swoole的运行模式 Swoole高效跟传统的web开发有什么区别,除了传统的LAMP/LNMP同步开发模式,swoole的异步开发模式是怎么样的. 1.1.传统web开发模式 PHP web开 ...