Vue Cli3如何創(chuàng)建項(xiàng)目

這篇文章主要介紹Vue Cli3如何創(chuàng)建項(xiàng)目，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

最近的開(kāi)發(fā)項(xiàng)目中使用了vue-cli 3.0，使用體驗(yàn)可以說(shuō)非常棒了，模板更加制定化，配置更加簡(jiǎn)潔。以下總結(jié)下應(yīng)用過(guò)程中的一些經(jīng)驗(yàn)。

1. 安裝

npm install -g @vue/cli

2. 創(chuàng)建一個(gè)項(xiàng)目

vue create iview-admin
# OR
vue ui

• default (babel, eslint) 默認(rèn)套餐，提供 babel 和 eslint 支持。

• Manually select features 自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持 TypeScript ，就應(yīng)該選擇這一項(xiàng)。

1. TypeScript 支持使用 TypeScript 書(shū)寫(xiě)源碼。

2. Progressive Web App (PWA) Support PWA 支持。

3. Router 支持 vue-router 。

4. Vuex 支持 vuex 。

5. CSS Pre-processors 支持 CSS 預(yù)處理器。

6. Linter / Formatter 支持代碼風(fēng)格檢查和格式化。

7. Unit Testing 支持單元測(cè)試。

8. E2E Testing 支持 E2E 測(cè)試。

3. 運(yùn)行項(xiàng)目

$ npm run serve

4. 在根目錄創(chuàng)建 vue.config.js 空文件，配置 文件

module.exports = {
 /** 區(qū)分打包環(huán)境與開(kāi)發(fā)環(huán)境
  * process.env.NODE_ENV==='production' (打包環(huán)境)
  * process.env.NODE_ENV==='development' (開(kāi)發(fā)環(huán)境)
  * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
  */
 // 基本路徑
 baseUrl: '/',
 // 輸出文件目錄
 outputDir: 'dist',
 // eslint-loader 是否在保存的時(shí)候檢查
 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可以這樣寫(xiě)
 // configureWebpack: (config) => {
 //  config.entry = ["babel-polyfill", "./src/main.js"]
 // },
 // vue-loader 配置項(xiàng)
 // https://vue-loader.vuejs.org/en/options.html
 // vueLoader: {},
 // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
 productionSourceMap: true,
 // css相關(guān)配置
 css: {
  // 是否使用css分離插件 ExtractTextPlugin
  extract: true,
  // 開(kāi)啟 CSS source maps?
  sourceMap: false,
  // css預(yù)設(shè)器配置項(xiàng)
  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 插件相關(guān)配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相關(guān)配置
 devServer: {
  // open: process.platform === 'darwin',
  // 自動(dòng)打開(kāi)瀏覽器
  open: true,
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  // 處理跨域問(wèn)題
  proxy: {}, // 設(shè)置代理
  before: app => {}
 },
 // 第三方插件配置
 pluginOptions: {
  // ...
 }
}

設(shè)置代理

# string

module.exports = {

 devServer: {

 proxy: '<url>'

 }

}

 

# Object

module.exports = {

 devServer: {

 proxy: {

  '/api': {

  target: '<url>',

  ws: true,

  changeOrigin: true

  },

  '/foo': {

  target: '<other_url>'

  }

 }

 }

}

啟用dll

啟用dll后，我們的動(dòng)態(tài)庫(kù)文件每次打包生成的vendor的[chunkhash]值就會(huì)一樣，其值可以是 true/false,也可以制定特定的代碼庫(kù)。

module.exports = {

 dll: true

}

module.exports = {

 dll: [

 'dep-a',

 'dep-b/some/nested/file.js'

 ]

}

靜態(tài)資源路徑

相對(duì)路徑

• 靜態(tài)資源路徑以 @  開(kāi)頭代表  <projectRoot>/src

• 靜態(tài)資源路徑以 ~  開(kāi)頭，可以引入node modules內(nèi)的資源

public文件夾里的靜態(tài)資源引用

# 在 public/index.html中引用靜態(tài)資源

<%= webpackConfig.output.publicPath %>

<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico" rel="external nofollow"  >

# vue templates中，需要在data中定義baseUrl

<template>

 <img :src="`${baseUrl}my-image.png`">

</template>

<script>

 data () {

 return {

  baseUrl: process.env.BASE_URL

 }

 }

</script>

webpack配置修改

用 webpack-chain 修改webpack相關(guān)配置，強(qiáng)烈建議先熟悉webpack-chain和vue-cli 源碼，以便更好地理解這個(gè)選項(xiàng)的配置項(xiàng)。

對(duì)模塊處理配置

// vue.config.js

module.exports = {

 chainWebpack: config => {

 config.module

  .rule('js')

  .include

   .add(/some-module-to-transpile/) // 要處理的模塊

 }

}

修改webpack Loader配置

// vue.config.js

module.exports = {

 chainWebpack: config => {

 config.module

  .rule('scss')

  .use('sass-loader')

  .tap(options =>

  merge(options, {

   includePaths: [path.resolve(__dirname, 'node_modules')],

  })

  )

 }

}

修改webpack Plugin配置

// vue.config.js

module.exports = {

 chainWebpack: config => {

 config

  .plugin('html')

  .tap(args => {

  return [/* new args to pass to html-webpack-plugin's constructor */]

  })

 }

}

eg: 在本次項(xiàng)目較小，只對(duì)uglifyjs進(jìn)行了少量的修改，后期如果還有配置上優(yōu)化會(huì)繼續(xù)添加。

chainWebpack: config => {

 if (process.env.NODE_ENV === 'production') {

  config

   .plugin('uglify')

   .tap(([options]) =>{

    // 去除 console.log

    return [Object.assign(options, {

     uglifyOptions: { compress: {

      drop_console : true,

      pure_funcs: ['console.log']

     }}

    })]

   })

 }

}

全局變量的設(shè)置

在項(xiàng)目根目錄創(chuàng)建以下項(xiàng)目：

.env    # 在所有環(huán)節(jié)中執(zhí)行

.env.local   # 在所有環(huán)境中執(zhí)行，git會(huì)ignored

.env.[mode]   # 只在特定環(huán)境執(zhí)行( [mode] 可以是 "development", "production" or "test" )

.env.[mode].local # 在特定環(huán)境執(zhí)行, git會(huì)ignored

.env.development # 只在生產(chǎn)環(huán)境執(zhí)行

.env.production  # 只在開(kāi)發(fā)環(huán)境執(zhí)行

在文件里配置鍵值對(duì)：

# 鍵名須以VUE_APP開(kāi)頭

VUE_APP_SECRET=secret

在項(xiàng)目中訪問(wèn)：

console.log(process.env.VUE_APP_SECRET)

這樣項(xiàng)目中的 process.env.VUE_APP_SECRET 就會(huì)被 secret 所替代。

vue-cli 3 就項(xiàng)目性能而言已經(jīng)相當(dāng)友好了，私有制定性也特別強(qiáng)，各種配置也特別貼心，可以根據(jù)項(xiàng)目大小和特性制定私有預(yù)設(shè)，對(duì)前期項(xiàng)目搭建而言效率極大提升了。

以上是“Vue Cli3如何創(chuàng)建項(xiàng)目”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！