Vue Cli3 创建项目

Vue,Markdown

1. 安装

npm install -g @vue/cli

2. 创建一个项目

vue create iview-admin# ORvue ui

enter image description here

default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。

Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。

enter image description here

TypeScript 支持使用 TypeScript 书写源码。

Progressive Web App (PWA) Support PWA 支持。

Router 支持 vue-router 。

Vuex 支持 vuex 。

CSS Pre-processors 支持 CSS 预处理器。

Linter / Formatter 支持代码风格检查和格式化。

Unit Testing 支持单元测试。

E2E Testing 支持 E2E 测试。

enter image description here

3. 运行项目

$ npm run serve

enter image description here

4. 在根目录创建 vue.config.js 空文件，配置文件

module.exports = {  /** 区分打包环境与开发环境   * process.env.NODE_ENV==='production'  (打包环境)   * process.env.NODE_ENV==='development' (开发环境)   * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',   */  // 基本路径  baseUrl: '/',  // 输出文件目录  outputDir: 'dist',  // eslint-loader 是否在保存的时候检查  lintOnSave: true,  // use the full build with in-browser compiler?  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only  // compiler: false,  // webpack配置  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md  chainWebpack: () => {},  configureWebpack: () => {},  //如果想要引入babel-polyfill可以这样写  // configureWebpack: (config) => {  //   config.entry = ["babel-polyfill", "./src/main.js"]  // },  // vue-loader 配置项  // https://vue-loader.vuejs.org/en/options.html  // vueLoader: {},  // 生产环境是否生成 sourceMap 文件  productionSourceMap: true,  // css相关配置  css: {    // 是否使用css分离插件 ExtractTextPlugin    extract: true,    // 开启 CSS source maps?    sourceMap: false,    // css预设器配置项    loaderOptions: {},    // 启用 CSS modules for all css / pre-processor files.    modules: false  },  // use thread-loader for babel & TS in production build  // enabled by default if the machine has more than 1 cores  parallel: require('os').cpus().length > 1,  // 是否启用dll  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode  // dll: false,  // PWA 插件相关配置  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa  pwa: {},  // webpack-dev-server 相关配置  devServer: {    // open: process.platform === 'darwin',    // 自动打开浏览器    open: true,    host: '0.0.0.0',    port: 8080,    https: false,    hotOnly: false,    // 处理跨域问题    proxy: {}, // 设置代理    before: app => {}  },  // 第三方插件配置  pluginOptions: {    // ...  }}