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

雨点打透心脏的1/2处 2022-03-01 16:08 213阅读 0赞

### 目录，路由和格式化 ###

*   *   *   *  一、项目配置
             *   *   *  1. 项目自启动
                     *  2.文件目录
             *  二、路由配置
             *   *   *  1. 相关依赖
                     *  2.路由配置
             *  三、格式化内容
             *   *   *  1.CSS样式格式化
                     *  2.移动端html和动态rem

#### 一、项目配置 ####

###### 1. 项目自启动 ######

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

![vue项目自启动][vue]

###### 2.文件目录 ######

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

> 删掉脚手架自动生成的东西  
> 重新设置目录  
> ![在这里插入图片描述][20190327145816705.png]  
> 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’  
> ![路由][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70]

###### 2.路由配置 ######

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

> 下面是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源码][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>
        <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.

[vue]: /images/20220301/c4c0582de8ee47859034a12f79e9a5c0.png
[20190327145816705.png]: /images/20220301/a47e84c8a77d4b09bc99bb24805be962.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70]: /images/20220301/676ebb48f6c9438b9e36eb4729dabdb2.png
[vue 1]: https://blog.csdn.net/qq_42690547/article/details/88316897
[rem_js]: https://blog.csdn.net/qq_42690547/article/details/88855307