记本身一次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. 结语

拖了很久没写，第一次本身组织语言有点很差，语言不一样通顺的地方望多多指点，就当本身练习。
下一节讲解路由基础，看有没有时间写了，但愿给萌新点个赞!