使用Vue-cli3创建项目

目录解析

// vue.config.js
配置文件

// package.json
定义了项目的描述, 以及一些依赖

// babel.config.js 
babel 的配置文件

// .postcssrc.js
css 补充兼容性代码的文件

// .gitignore
git提交忽略的文件

// .eslintrc.js
配置 eslint 规则的文件

// public/  index.html  favicon.ico
放一些公共文件  
index.html 模板打包后生成最后的页面
favicon.ico 标签上放的图表

// src/  assets/  components/  views/
assets/  放一些静态资源, 图片 字体文件等
components/  从代码中抽离出一些可以复用的组件
views/  视图 , 页面
App.vue  基础组件
main.js  项目入口文件
router.js 路由文件
store.js 状态管理文件


// 使用 VS Code 可以添加文件  .editorconfig
配置编辑器使用习惯
root = true  // 生效
[*]  // 对所有文件
charset = utf-8
indent_style = tabs  // 缩进
indent_size = 2 // 缩进尺寸
...
安装插件 EditConfig for VS Code


// 添加 src/api/
接口 ajax请求可以写在里面, 统一管理

// 修改 assets/img/  assets/fonts
资源归类, 图片, 图标字体等..

// src/config/
项目的一些配置
export default {
  // 导出...
}
import config from './config'

// src/directive/index.js
放 Vue的自定义指令

// src/lib/
util.js  // 与业务结合的工具方法放在这里
tools.js  // 与业务没有关系的工具函数方法

// src/router/index.js   src/router/router.js
专门放置路由, 路由复杂分开模块化写
import Home from './home.vue'  // router.js
export default [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

import Vue from 'vue'
import Router from 'vue-router'
import routes from './router.js'
Vue.use(Router)
export default new Router({
  routes
})

// src/store/index.js  src/store/state.js  mutations.js  actions.js 
import Vue from 'vue'  // index.js
import Vuex from 'vuex'
import state from './state.js'
import mutations from './mutations.js'
import actions from './actions.js'
Vue.use(vuex)
export default new Vuex.Store({
  state,
  mutations,
  actions
})

// store 更加复杂  src/store/module/user.js
const state = {// todo..}
const mutations = {}
const actions = {}
export default {
  state, mutations, actions
}

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
import mutations from './mutations.js'
import actions from './actions.js'
import user from './module/user'
Vue.use(vuex)
export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {
    user
  }
})


// src/mock/index.js
如果有需要,可以模拟一些假数据
import Mock from 'mockjs'
export default Mock

配置 vue.config.js

const BASE_URL = process.env.NODE_ENV === 'production' ? '/hongyou/' : '/'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
  // 基本路径
  publicPath: BASE_URL,
  chainWebpack: config => {
    config.resolve.alias
      .set('@',resolve('src'))  // 使用 @ 代替 src 下的目录
      .set('_c', resolve('src/components'))  // 使用 _c 代替 components 目录
  },
  productionSourceMap: false,   // 打包时不生成 .map 文件, 减少打包体积, 加快打包速度
  devServer: {  // 跨域配置
    proxy: 'http://localhost/8080'
  }
}