vue从入门到女装？？：从零开始搭建后台管理系统（四）vue搭建基础环境

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

vue项目搭建

搭建基础环境

CDN方式引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

npm方式

npm install vue

命令行工具 (Vue-CLI)

• 全局安装cli工具

npm install -g @vue/cli
# OR
yarn global add @vue/cli

• 创建vue项目

vue create projectName

选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。 默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的

cd demo
# 启动
npm run serve
# 构建
npm run build

目录解析

├── README.md            项目介绍
├── public 
│  ├── index.html           入口页
│  ├── favicon.ico          网站图标
├── config             项目配置
│  ├── dev.env.js           开发环境变量
│  ├── index.js            项目配置文件
│  ├── prod.env.js           生产环境变量
│  └── test.env.js           测试环境变量
├── mock              mock数据目录
│  └── hello.js
├── package.json          npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── vue.config.js          vue配置文件
├── src               源码目录  
│  ├── main.js             入口js文件
│  ├── app.vue             根组件
│  ├── components           公共组件目录
│  │  └── title.vue       一些自定义公共组件
│  ├── assets             资源目录
│  │  └── images
│  │    └── logo.png
│  │  └── font            自定义图标，字体等
│  ├── router             前端路由
│  │  └── index.js
│  ├── store              Vuex应用级数据（state）
│  │  └── index.js
│  └── views              页面目录
│    ├── hello.vue
│    └── notfound.vue
├── static             纯静态资源
└── test              测试文件目录（unit&e2e）
  └── unit              单元测试
    ├── index.js            入口脚本
    ├── karma.conf.js          karma配置文件
    └── specs              单测case目录
      └── Hello.spec.js

配置文件解析

vue.config.js

module.exports = {
  // 基本路径
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  //静态文件目录
  assetsDir: "static",
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // webpack配置
  // chainWebpack: config => {},
  configureWebpack: config => {
    config.devtool = 'source-map'
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      config.mode = "production";
    } else {
      // 为开发环境修改配置...
      config.mode = "development";
    }
    let plugin = [
      new AntDesignThemePlugin(options)
    ];
    config.plugins = [...config.plugins, ...plugin];
    config.resolve.alias.vue$ = "vue/dist/vue.esm.js";
  },

  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        // data: `@import "@/common/style/common.less";`
      },
      sass: {
      }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,

  // css相关配置
  // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  parallel: require("os").cpus().length > 1,

  lintOnSave: false //开启检查
};