Vue-cli 3.0 初體驗 ！

才剛剛錄完 四大維度解鎖 Webpack 3.0 前端工程化 就看到Vue-cli 已經發了Vue-cli 3.0.0 alpha.10 了，真的是很崩潰~~ 而且很快webpack 4 也馬上出來了.... 心裡不禁想說前端社區你不要這麼拼好不好？

回到正題：Vue-cli 是Vue 官方提供的腳手架工具，他的github 地址是：vue-cli github

如果你要體驗最新的 3.0 aplha 版本，可以通過

npm install -g vue@cli

可以安裝最新的vue-cli，然後你就可以使用來初始化你的項目

vue create <your project>

注意：現在已經不是選擇模版了，而是presets （預設）

首先是問你是否使用默認的preset 還是手動配置功能

如果你選擇手動選擇，則是一個多選的界面，可以使用 空格鍵選中或是取消， a鍵選中所有，i鍵反選

選好了以後，還會詢問一系列的問題，比如使用哪一個CSS預處理器，是否把以上的所有的功能選擇保存為一個下次可以用的 preset ？

是否選擇淘寶鏡像安裝？十分貼心啊

等安裝好了以後，就可以直接進入項目，使用

npm run serve

來啟動項目，注意：這裡不在是之前的npm run dev 了...

點開package.json就會發現scripts 中的內容是：

"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }

vue-cli-service ?!! 這個是什麼鬼？？這個肯定是vue 學習 react-scripts 搞了一個vue-cli-service 啊~

上面三個命令分別是啟動開發服務，打包，和格式化你得代碼

項目目錄一下清晰很多：

等等~~ 之前的config目錄哪裡去了？build 的目錄哪裡去了？webpack 配置沒有啊~~ 看來還是無配置的流行啊~~

那麼我們怎麼配置呢？要請出我們的vue.config.js 了，不用像其他的 create-react-app 或是 angular-cli生成的的項目一樣去eject 配置，通過在項目下設置vue.config.js 我們就可以配置開發中所需要的多數部分。

官方配置文檔

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. // 保存時是不是用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 // 使用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? // 生產環境的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. // 用不用 css Modules 啊？ 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, // 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 // 用不用 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: { // ... }}

看到這些變化，我只能說，同學需要不斷的學習，老師們也是一樣的~

一起加油吧~

作者： qbaty

鏈接：https://www.imooc.com/article/23379

來源：慕課網

本文原創發佈於慕課網 ，轉載請註明出處，謝謝合作

推薦閱讀：