Vue-cli 是Vue 官方提供的腳手架工(gōng)具(jù)，他(tā)的github 地址是：vue-cli github
如果你要體(tǐ)驗最新(xīn)的 3.0 aplha 版本，可(kě)以通過
npm install -g vue@cli
可(kě)以安(ān)裝(zhuāng)最新(xīn)的vue-cli，然後你就可(kě)以使用(yòng)來初始化你的項目
vue create <your project>
注意：現在已經不是選擇模版了，而是presets （預設）
首先是問你是否使用(yòng)默認的preset 還是手動配置功能(néng)
如果你選擇手動選擇，則是一個多(duō)選的界面，可(kě)以使用(yòng) 空格鍵選中(zhōng)或是取消， a鍵選中(zhōng)所有(yǒu)，i鍵反選
選好了以後，還會詢問一系列的問題，比如使用(yòng)哪一個CSS預處理(lǐ)器，是否把以上的所有(yǒu)的功能(néng)選擇保存為(wèi)一個下次可(kě)以用(yòng)的 preset ？
是否選擇淘寶鏡像安(ān)裝(zhuāng)？十分(fēn)貼心啊
等安(ān)裝(zhuāng)好了以後，就可(kě)以直接進入項目，使用(yòng)
npm run serve
來啓動項目，注意：這裏不在是之前的npm run dev 了...
點開package.json就會發現scripts 中(zhōng)的内容是：
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}vue-cli-service ?!! 這個是什麽鬼？？這個肯定是vue 學(xué)習 react-scripts 搞了一個vue-cli-service 啊~
上面三個命令分(fēn)别是啓動開發服務(wù)，打包，和格式化你得代碼
項目目錄一下清晰很(hěn)多(duō)：
等等~~ 之前的config目錄哪裏去了？build 的目錄哪裏去了？webpack 配置沒有(yǒu)啊~~ 看來還是無配置的流行啊~~
那麽我們怎麽配置呢(ne)？要請出我們的vue.config.js 了，不用(yòng)像其他(tā)的 create-react-app 或是 angular-cli生成的的項目一樣去eject 配置，通過在項目下設置vue.config.js 我們就可(kě)以配置開發中(zhōng)所需要的多(duō)數部分(fēn)。
官方配置文(wén)檔
module.exports = {
// Project deployment base
// By default we assume your app will be deployed at the root of a domain,
// e.g. https://www.my-app.com/
// If your app is deployed at a sub-path, you will need to specify that
// sub-path here. For example, if your app is deployed at
// https://www.foobar.com/my-app/
// then change this to '/my-app/'
baseUrl: '/',
// where to output built files
// 打包後的輸出目錄
outputDir: 'dist',
// whether to use eslint-loader for lint on save.
// 保存時是不是用(yòng)eslint-loader 來lint 代碼
lintOnSave: false,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
// 使用(yòng)runtime-only 還是 in-browser compiller
compiler: false,
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
// webpack 配置~
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader options
// https://vue-loader.vuejs.org/en/options.html
// vue-loader 配置
vueLoader: {},
// generate sourceMap for production build?
// 生産(chǎn)環境的sourceMap 要不要？
productionSourceMap: true,
// CSS related options
css: {
// extract CSS in components into a single CSS file (only in production)
extract: true,
// enable CSS source maps?
sourceMap: false,
// pass custom options to pre-processor loaders. e.g. to pass options to
// sass-loader, use { sass: { ... } }
loaderOptions: {},
// Enable CSS modules for all css / pre-processor files.
// This option does not affect *.vue files.
// 用(yòng)不用(yòng) css Modules 啊？
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
// 使用(yòng)多(duō)線(xiàn)程否？
parallel: require('os').cpus().length > 1,
// split vendors using autoDLLPlugin?
// can also be an explicit Array of dependencies to include in the DLL chunk.
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
// 用(yòng)不用(yòng) autoDLLPlugin，厲害了
dll: false,
// options for the PWA plugin.
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
// pwa 相關
pwa: {},
// configure webpack-dev-server behavior
// Webpack dev server
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
proxy: null, // string | Object
before: app => {}
},
// options for 3rd party plugins
pluginOptions: {
// ...
}}一起加油吧~
----圖文(wén)來自：網絡
----由廣州網站開發公(gōng)司-飛步科(kē)技(jì )編輯整理(lǐ)
