vue之目录设置，路由搭建和格式化项目（二）

最新推荐文章于 2022-09-04 18:22:33 发布

itmonkey-cn

最新推荐文章于 2022-09-04 18:22:33 发布

阅读量381

点赞数

分类专栏： Vue 文章标签： vue vue-router vue项目目录 vue项目格式化 rem动态font-size

本文链接：https://blog.csdn.net/qq_42690547/article/details/88754607

版权

Vue 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

目录，路由和格式化

一、项目配置

1. 项目自启动

在项目依赖安装完毕后
也就是cnpm i后的cnpm run dev还需要在浏览器中输入localhost：8000
可修改src-config-index.js自动打开浏览器渲染项目

vue项目自启动

2.文件目录

脚手架的项目文件和目录仅供测试用，需要把一些没用的删掉
一个好的项目，条理清晰的目录是必不可少的，主要是维护方便。

删掉脚手架自动生成的东西
重新设置目录

src：项目工作主文件。
api：项目接口统一管理文件。
components：公共组件，便于维护和重复利用，减少代码耦合度。
images：项目中用到的静态加载的图片和图标。
pages：项目的业务展示页面。
plugis：下载引入的一些方法模块。
router：项目的路由配置文件。
server：项目封装的一些方法。
store：状态管理文件，vux。
style：项目公共样式，格式化。

二、路由配置

1. 相关依赖

脚手架默认安装了vue-router。
import() 是属于 Stage 3 的特性,需要安装/添加== syntax-dynamic-import== 插件来避免 parser 报错。

vue官方的一种方法，import()方法和增加webpackChunkName。
1.需要安装 cnpm i -s @babel/plugin-syntax-dynamic-import
2.配置webpack，在webpack-base-conf.js的output加入chunkFilename: ‘[name].js’

2.路由配置

这里是vue路由的一篇详细介绍。

下面是router里index.js内容

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [{
      path: '/', //默认展示的欢迎页
      name: 'welcome',
      meta: {
        title: '欢迎页',
      },
      component: () => import( /* webpackChunkName: "welcome" */ '@/components/welcome')
    },
    {
      path: 'home',
      name: 'home',
      meta: {
        title: '首页',
      },
      component: () => import( /* webpackChunkName: "home" */ '@/components/home')
    },
    {
      path: 'choose',
      name: 'choose',
      meta: {
        title: '选购',
      },
      component: () => import( /* webpackChunkName: "choose" */ '@/components/choose')
    },
    {
      path: 'find',
      name: 'find',
      meta: {
        title: '发现',
      },
      component: () => import( /* webpackChunkName: "find" */ '@/components/find')
    },
    {
      path: 'cart',
      name: 'cart',
      meta: {
        title: '购物车',
      },
      component: () => import( /* webpackChunkName: "cart" */ '@/components/cart')
    },
    {
      path: 'personal',
      name: 'personal',
      meta: {
        title: '个人中心',
      },
      component: () => import( /* webpackChunkName: "personal" */ '@/components/personal')
    },
    {
      path: '*', //非法路径重定向为主页
      redirect: '/home'
    }
  ]
})

三、格式化内容

另外一篇格式化内容，有rem的js源码

1.CSS样式格式化

css常规格式化

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption{
    padding: 0;
    margin: 0;
    list-style: none;
    font-style: normal;
    text-decoration: none;
    border: none;
    color: #333;
    font-weight: normal;
    font-family: "Microsoft Yahei";
    box-sizing: border-box;
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing: antialiased;
    &:hover{
        outline: none;
    }
}

2.移动端html和动态rem

html

 <!-- <head>移动端表头 -->
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <meta name="screen-orientation" content="portrait"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <title>移动端页面配置</title>
  </head>

rem布局之js

//阿里的一套动态生成根rem。
< script > ! function (e) {
  function t(a) {
    if (i[a]) return i[a].exports;
    var n = i[a] = {
      exports: {},
      id: a,
      loaded: !1
    };
    return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
  }
  var i = {};
  return t.m = e, t.c = i, t.p = "", t(0)
}([function (e, t) {
  "use strict";
  Object.defineProperty(t, "__esModule", {
    value: !0
  });
  var i = window;
  t["default"] = i.flex = function (normal, e, t) {
    var a = e || 100,
      n = t || 1,
      r = i.document,
      o = navigator.userAgent,
      d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
      l = o.match(/U3\/((\d+|\.){5,})/i),
      c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
      p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
      s = i.devicePixelRatio || 1;
    p || d && d[1] > 534 || c || (s = 1);
    var u = normal ? 1 : 1 / s,
      m = r.querySelector('meta[name="viewport"]');
    m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m
      .setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" +
        u + ",minimum-scale=" + u), r.documentElement.style.fontSize = normal ? "50px" : a / 2 * s * n + "px"
  }, e.exports = t["default"]
}]);
flex(false, 100, 1);

</script>

end.

itmonkey-cn

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue之目录设置，路由搭建和格式化项目（二）

路由和目录项目配置1. 项目自启动2.文件目录项目配置1. 项目自启动在项目依赖安装完毕后也就是cnpm i后的cnpm run dev还需要在浏览器中输入localhost：8000可修改src-config-index.js自动打开浏览器渲染项目2.文件目录脚手架的项目文件和目录仅供测试用，需要把一些没用的删掉一个好的项目，条理清晰的目录是必不可少的，主要是维护方便。...
复制链接

扫一扫