Vue Cli3 建立項目

Vue Cli3 建立項目

Vue,Markdown

---

1. 安裝

npm install -g @vue/cli

2. 建立一個項目

vue create iview-admin
# OR
vue ui

• default (babel, eslint) 默認套餐，提供 babel 和 eslint 支持。
• Manually select features 本身去選擇須要的功能，提供更多的特性選擇。好比若是想要支持 TypeScript ，就應該選擇這一項。

• TypeScript 支持使用 TypeScript 書寫源碼。
• Progressive Web App (PWA) Support PWA 支持。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 預處理器。
• Linter / Formatter 支持代碼風格檢查和格式化。
• Unit Testing 支持單元測試。
• E2E Testing 支持 E2E 測試。

3. 運行項目

$ npm run serve

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: {
    // ...
  }
}

具體請查看 Vue Cli 官網

License

• 能夠拷貝、轉發，可是必須提供原做者信息，同時也不能將本項目用於商業用途。