记自己一次vue基础实战配置篇

1. 前言

记录自己从基础学习 vue 实战，初入发表文章，望各位大佬口下留情！不对之处还请大佬指点一下。

2. 新建，配置项目

1. 新建 Vue-cli3.0 脚手架的项目

在这里普及一下，什么是 Vue-cli？

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。链接描述

上面引用的链接已经很好说明一切了，这里我就不一一详细说明怎么安装 node.js 和 npm 了，我就说明一下我自己的基础开发流程：

1.1 使用 Vue ui
我使用的是 Vscode 编辑器，可以在编辑器终端使用快捷键Ctrl + ·，可以快速打开，输入 Vue ui。在加载完后，你自己默认的浏览器自动打开配置界面新建项目。以下是我今天的配置：

• 在详情上新建项目名；选择包管理器，我这里选择是 npm，因为当然是用的比较熟悉了；其余的默认操作；下一步；
• 预设（Presets），默认使用官方提供好的插件和配置，内心感觉不太妙还是谨慎一下手动配置；下一步；
• 功能（Features），手动添加插件：
  一.（Babel）可以把 ES6/ 7 语法兼容或者换成 ES5 更加适合低版浏览器的版本，使开发者无需考虑浏览器的支持问题，随便使用新语法；
  二.（Router）路由，必须滴；
  三.（Vuex）状态管理，大型项目可以提现它的重要性，小项目也是可以用的，反正不亏；
  四.（CSS Pre-processors）css 预处理，可以为 css 添加一些编码的特性；
  五.（Linter/Formatter）编写代码风格提示，及时纠正你的小毛病；
  六.（Use config files）使用配置文件
• 配置（Configuration）选择预处理器，看个人平时习惯，这里我选（Eslint+standard config）

上述配置，回到 Vscode, 终端输入 npm run serve, 就开始你的奇妙之旅了。

3. 项目配置

回到项目的我们可以看一下依赖包，生成好的项目

上面的文件依次是

• 依赖包（node-modules），这就不用多说了吧，安装的依赖都在这里面，有兴趣后面会对里面的源码进行更深层次的解读。
• 公共文件夹（public）里面是 vue 的图标加首页的 html
• src 目录重头戏 (我一般有以下文件)
  1.api 接口文档，与后端进行数据交互；
  2.assets项目资源主要（img）图片、（font）字体等等静态资源存放在这里；
  3.components组件及一些复用组件；
  4.config主要是根据模块系统导出配置对象；
  5.directive自定义指令，可以写自己定义好的函数使用
  6.lib 与实战开发相关或者与实战不相关工具函数都在放在这里
  7.mock 模拟数据，在没有与后端正式对接的时候，可以模拟数据，方便到时候与后端开发时修改数据传输格式
  8.router 路由，跳转路由页面都要在这里注册，后面会讲到把一部分抽离出来，就是权限那一块
  9.store 状态管理，vuex 的 state、mutations、actions、getters 等等都在这里，后面会详细介绍
  10.views 视图，页面主要展示和组件组合使用的文件
  11.App.vue 起始页面，通过路由 <router> 跳转个个页面
  12.main.js 全局文件，在这导入的文件可以去全局使用 import
• .editorconfig 用来协同不同开发人员、编辑器、代码风格、样式规格化定义和维护一致的编码样式
• .eslintrc.js 语法检测配置
• postcss.config.js 将 px 转化为 rem
• vue.config.js 开发总配置：

// 定义一个方法
const path = require('path')
// 主要是方便导入名简写，这里使用 es6 的箭头函数
const resolve = dir => path.join(__dirname, dir)
// 开发环境配置 '/' 指定域名的根目录下，如果是开发环境写‘/xxxx/’即可
const BASE_URL = process.env.NODE_ENV === 'procution' ? '/xxxx/' : '/'
module.exports = {
  // 取消每一次保存编译
  lintOnSave: false,
  // 项目基本路径
  baseUrl: BASE_URL,
  // 方便开发的配置
  chainWebpack: config => {
    // webpack 目录别名配置
    config.resolve.alias
      // 导入时以 @可以代替 src，拼接路径
      .set('@', resolve('src'))
      // 上同
      .set('_c', resolve('src/components'))
  },
  // 打包时不生成.map 文件，减少打包文件
  productionSourceMap: false,
  // 跨域问题
  devServer: {proxy: 'http://localhost:4000'}
}

4. 结语

拖了好久没写，第一次自己组织语言有点不好，语言不同通顺的地方望多多指点，就当自己练习。
下一节讲解路由基础，看有没有时间写了，希望给萌新点个赞!