vue 总结一项目建立及文件夹结构配置

布满荆棘的人生 2022-10-01 05:56 120阅读 0赞

## 项目配置 ##

首先，按官方指引，使用 vue-cli 搭建 vue 的项目，在项目里按照上面的文档尝试修改，加深理解：

# 安装依赖库，建议指定 vue 和 element 版本，避免版本升级带来意料之外的 bug
    
    $ npm install vue@2.1.6  element-ui@1.4.6 vuex axios
    
    #全局安装脚手架
    
    $ npm install -g vue-cli 
    
    # 创建一个基于 webpack 模板的新项目my-project
    
    $ vue init webpack my-project
    
    # 进入项目目录
    
    $ cd my-project
    
    # 安装依赖
    
    $ npm install
    
    # 运行项目
    
    $ npm run dev

运行结果如下：

![20190611163019552.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM4MDk3Mg_size_16_color_FFFFFF_t_70][]

## 项目结构目录分析： ##

![20190611163827152.png][]

相关文件和文件夹的含义：

**build 文件夹**: 里面是对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等；

**config 文件夹**: 主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。

**node\_modules**: 项目的依赖库；

**src 文件夹**： 我们主要操作的地方，组件的增加修改等都在这个文件夹里操作，下文会有详细介绍；

**static 文件夹**: 静态资源文件夹，放置不会变动的资源，直接被复制到最终的打包目录（默认是dist/static）下；

**.babelrc**: 使用 babel 的配置文件，用来设置转码规则和插件；

**.editorconfig**: 代码的规范文件，规定使用空格或 tab 缩进，缩进的长度是两位还是四位之类的代码风格，使用的话需要在编辑器里下载对应的插件；

**.eslintignore**: 指定 eslint 忽略的文件；

**.eslintrc**: 配置 eslint 的检测规则，强制按照规则书写代码；

**.gitignore**: 指定 git 忽略的文件，所有 git 操作均不会对其生效；

**.postcssrc**: 指定使用的 css 预编译器，里面默认配置了 autoprefixer ，自动补全浏览器前缀；

**favicon.ico**: 浏览器标签页 title 旁边的小图标，这是需要我们自己粘贴过来的；

**index.html**: 首页文件，项目运行的时候，会自动将我们在 src 文件夹里生成的组件插入这个文件里；

**LICENSE**: 项目声明的 license；

**package-lock.jso**n: 当 node\_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新；

**package.json**: 指定项目开发和生成环境中需要使用的依赖库；

**README.md**: 相当于是一个备注文件，对项目开发过程中需要注意的地方进行一些说明。

## src 文件夹结构 ##

src 文件夹里的文件夹设置是灵活的，可以根据自己的习惯进行，不必雷同。下面是这次项目的结构：

![20190611163736814.png][]

**assets**: 放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式；

**components**: 放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为通用组件，避免重复工作；

**http**: 放置与后台 api 相关的文件。这里面有 axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件；

**mixins**: 放置混合选项的文件。具体来说，相当于是公用函数的集合，在组件中引用时，可以作用于组件而不必书写重复的方法；

**pages**: 放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构，再引入通用模块组件，形成完整的页面；

**router**: 放置路由设置文件，指定路由对应的组件；

**store**: 放置 vuex 需要的状态关联文件，设置公共的 state、mutations 等；

**App.vue**: 入口组件，pages 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；

**main.js**: 入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。

下面讲几个文件：

**index.html**

主页我们可以像平时普通的html文件一样引入文件和书写基本信息，添加meta标签等。.

## App.vue  ##

这是一个标准的vue组件（根组件），包含三个部分，一个是模板，一个是script，一个是样式，这里需要了解vue的基础。.

pages 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用

其中，<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。渲染的组件还可以内嵌自己的，根据嵌套路径，渲染嵌套组件。这样，就实现了单页面下，根据不同路由，渲染不同组件的目的。

基本上根组件没什么交互要做，底部的样式其实也可以放在全局的样式表里。

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <hello></hello>
      </div>
    </template>
    
    <script>
    import Hello from './components/Hello'
    
    export default {
      name: 'app',
      components: {
        Hello
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

总结   
在webpack的配置文件里，设置了main.js是入口文件，我们的项目默认访问index.html，这个文件里面<div id="app"></div>和App.vue组件里面的容器完美的重合了，也就是把组件挂载到了index页面，然后我们只需要去建设其他组件就好了，在App组件中我们也可以引入，注册，应用其他组件，后面我会介绍如何通过路由将其他组件渲染在App组件，这样我们就只需要去关注每个组件的功能完善。

### main.js ###

> main.js: 入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。

这个是负责配置影响全局的内容的文件，具体会有以下几种作用：

1、引入vue 以及相关的库

import Vue from 'vue'  //引入 vue
    
    import store from './store'  //引入 vuex
    
    import router from './router';  //引入路由配置文件
    
    import App from './App'  //引入根组件

2、 引入需要用到的第三方库（注意注册使用方式的区别）

// 引入element-ui
    
    import ElementUI from 'element-ui';
    
    import 'element-ui/lib/theme-default/index.css';
    
    Vue.use(ElementUI);
    
    // 引入字体图标样式，这里使用了阿里妈妈的 iconfont 字体库
    
    import '@assets/iconfont/iconfont.css';
    
    import '@assets/iconfont/iconfont.js';
    
    // 引入copy 信息组件
    
    import VueClipboards from 'vue-clipboards';
    
    Vue.use(VueClipboards);
    
    // 引入 axios 库
    
    import axios from 'axios'
    
    // 引入 d3 图形库
    
    import * as d3 from 'd3'
    
    // 引入国际化的库
    
    import VueI18n from 'vue-i18n';
    
    Vue.use(VueI18n);
    
    //引入自定义的 json 格式中英文对照文件
    
    import zh from '@assets/lang/zh-CN'
    
    import en from '@assets/lang/en-US'
    
    Vue.config.lang = 'zh-cn'  //设置默认中文
    
    Vue.locale('zh-cn', zh)
    
    Vue.locale('en', en)
    
    // 引入时间转换模块
    
    import moment from 'moment';
    
    moment.locale('zh-cn');
    
    Vue.prototype.$moment = moment;  //将 moment 模块转换成 Vue 的原型方法，在组件里可以直接使用 this.$moment(time)
    
    // 引入图表
    
    import ECharts from 'vue-echarts';
    
    Vue.component('chart', ECharts);  //注册 Echarts 成为全局组件，在组件里可以直接调用 <chart></chart>

3、 引入自定义的库

// 引入银行卡图标样式
    
    import '@assets/icon-bank/iconfont.js';  // iconfont 上收集的银行卡图标
    
    // 引入自定义的http模块
    
    import { AjaxApi } from '@http/AjaxApi.js';  //http 文件夹里自定义的处理 api 接口的文件，导出一个包含所有与后台接口交流的函数的对象
    
    Vue.prototype.$axios = AjaxApi;  //加入 Vue 原型方法，组件里通过 this.$axios.xxx() 调用
    
    // 引入公共方法
    
    import commonMixins from '@mixins/common-mixins.js';  //mixins 文件夹里自定义的通用函数的集合
    
    Vue.mixin(commonMixins);  //全局注册混合

4、 引入自定义的公共样式，使得组件内可以用scoped定义自身的样式

// 引入公共样式以及修改过的 element 样式
    
    import '@assets/css/common.less'
    
    import '@assets/css/theme.less'

5、 定义一些简短的不需要单独引入的全局修改

// 在html5 history 模式下，在form表单的组件(input输入框等)里点击enter，会自动将表单数据以get的方式发送到后台，需要阻止默认事件
    
    document.onkeydown = function(e) {
    
        var e = e || event;
    
        if(e.keyCode == 13) {
    
            e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    
        }
    
    }；
    
    // 格式化金额，每三位加逗号，可选保留几位小数
    
    Number.prototype.format = function(n, x) {
    
        var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';
    
        return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');
    
    };

6、 设置vue的全局配置，在启动应用前应用

Vue.config.productionTip = false;  // 阻止 vue 在启动时生成生产提示

7、 指定渲染的文件

new Vue({
    
        el: '#app',
    
        template: '<App/>' ,
    
        router,
    
        store,
    
        components: { App }
    
    })

--------------------

### assets 文件夹 ###

> assets: 放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件以及其他资源类文件。

css 文件夹里会有[重置 css 样式的文件][css]以及其他全局样式文件。

js 文件夹里放置了包含银行字典和全国省市的字典文件，在组件里引用之后遍历获取数据。

--------------------

### components 文件夹 ###

> components: 放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为通用组件，避免重复工作；

可以根据功能模块建立文件夹，放置本功能会用到的通用组件。例如 login 文件夹里可以放置注册、登录、重置密码这几个功能会用的共同模块文件（账号、密码、图形验证码、短信验证码）； account-center 文件夹放置修改账号相关的模块。

全局通用的公共模块可以不需要建立文件夹。

--------------------

### http 文件夹 ###

> http: 放置与后台 api 相关的文件。这里面有 axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件；

config.js 是根据项目需求配置的 axios 实例文件，通过 axios.create(\[config\]) 创建，可以配置诸如指定成功的状态码、序列化 params、设置 headers 、修改 token 、设置全局请求/响应拦截器、设置 baseURL 等。

AjaxApi.js 是通过导入 config.js 实例，传入 API 和其他参数，给每个 API 配置一个专属函数，再集合导出成对象的文件。

### pages 文件夹 ###

> pages: 放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构，再引入通用模块组件，形成完整的页面

这里面就是会被插入根组件的 <router-view/> 节点里的文件，根据路由变化，根组件渲染不同的文件。

都是单文件组件，没有特殊的结构，就不放图了。

--------------------

### router 文件夹 ###

> router: 放置路由设置文件，指定路由对应的组件，设置路由钩子

例子如下：

import Vue from 'vue';
    
    import Router from 'vue-router';
    
    import Tab from '@pages/tab';
    
    import { MessageBox } from 'element-ui';
    
    Vue.use(Router);
    
    const router = new Router({  //新建路由
    
    routes: [
    
        {
    
            path: '/',
    
            redirect: '/signin'  //重定向路由
    
        },
    
        {
    
            path: '/signin',
    
            name: 'signIn',  //命名路由
    
            component: (resolve) => {  //按需加载
    
                require(['@pages/sign-in'], resolve);
    
              }
    
          },
    
        {
    
            path: '/signup',
    
            name: 'signUp',
    
            component: (resolve) => {
    
                require(['@pages/sign-up'], resolve);
    
                }
    
            },
    
            {
    
                path: '/tab',
    
                component: Tab,
    
                children: [  //嵌套路由
    
                    {
    
                        path: 'index',
    
                        name: 'index',
    
                        component: (resolve) => {
    
                        require(['@pages/index'], resolve);
    
                        }
    
                    }
    
                ]
    
            }
    
        ]
    
    });
    
    router.beforeEach((to, from, next) => {  //检测 token ，跳转登录页
    
    if (checkPathRequiredAuth(to.path) && !sessionStorage.token) {
    
        sessionStorage.clear();
    
        MessageBox({
    
            title: '跳转提示',
    
            message: '用户认证已过期或不存在，确认后跳转到登录页',
    
            confirmButtonText: '确定',
    
            type: 'warning',
    
            callback: action => {
    
                next({
    
                    path: '/signin'
    
                });
    
            }
    
        });
    
    } else {
    
        next();
    
    }
    
    });
    
    export default router;

--------------------

## ##

[20190611163019552.png]: /images/20220119/f53931e783ae46a0b45b562847bd50bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM4MDk3Mg_size_16_color_FFFFFF_t_70]: /images/20220119/e05eeafb309b4c40bc5897c8696124e8.png
[20190611163827152.png]: /images/20220119/d2aaa51048354a44b36249f358e18fa7.png
[20190611163736814.png]: /images/20220119/2d7f319755d6464ebda7006b089d2155.png
[css]: https://www.cnblogs.com/HtmlCss3/p/6061623.html