@[TOC](Vue CLI 3 腳手架搭建)

注意 see -> cli.vuejs.org/zh/guide/

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli

Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。

卸載舊版本 npm uninstall vue-cli -g 或 yarn global remove vue-cli

安裝 npm install -g @vue/cli 或 yarn global add @vue/cli

你還可以用這個命令來檢查其版本是否正確 (3.x)： vue --version [^1]: mermaid語法說明

Vue CLI 3 搭建

創建項目

vue create hello-world 復制代碼

你會被提示選取一個 preset

默認配置

手動配置 （方向鍵上下移動，空格選中，Enter確定，自定義配置中，您將會看到這些配置項：

手動細節配置

//是否使用babel做轉義 ?Use class-style component syntax? //是否使用router ?Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) // css預處理器 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) > Sass/SCSSLessStylus //選擇語法檢測規范 ?Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention onlyESLint + Airbnb configESLint + Standard configESLint + Prettier // 選擇 保存時檢查 / 提交時檢查 ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save( ) Lint and fix on commit //選擇配置信息存放位置，單獨存放或者并入package.json ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > In dedicated config filesIn package.json //是否保存當前預設，下次構建無需再次配置 ? Save this as a preset for future projects? (y/N) 復制代碼

完成安裝

目錄

自定義配置文件 vue.config.js

module.config={//基本路徑baseUrl:"/", //輸出文件路徑outputDir:"dist", // eslint-loader 是否在保存的時候檢查lintOnSave:true,//是否使用包含運行時編譯器的 Vue 構建版本runtimeCompiler:true,//https://cli.vuejs.org/zh/config/#chainwebpackchainWebpack:()=>{},//https://cli.vuejs.org/zh/config/#configurewebpackconfigureWebpack:()=>{},//生產環境是否生成 sourceMap 文件productionSourceMap:true,//css相關配置css:{// 是否使用css分離插件 ExtractTextPluginextract:true,// 開啟 CSS source maps?sourceMap:true,// css預設器配置項loaderOptions:{},// 啟用 CSS modules for all css / pre-processor files.modules:false},// 是否啟用dlldll:false,// PWA 插件相關配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwapwa: {},//是否為 Babel 或 TypeScript 使用 thread-loaderparallel:require('os').cpus().length > 1,// webpack-dev-server 相關配置 https://www.webpackjs.com/configuration/dev-server/devServer:{open:process.platform === 'darwin',//返回當前平臺類型('darwin','freebsd','linux','sunos'或者 'win32')host:"0,0,0,0",port:"8080",https:false, //dev-server 通過 HTTP 提供服務hotOnly:false,proxy:null,/*proxy:{"/api":{target:"localhost:8080",changeOrigin:true,pathRePath:{"^/api":"/mock"}}}*/before(app){}},//第三方插件配置pluginOptions:{} } 復制代碼

運行

npm run serve 運行 npm run build 打包 npm run lint 語法檢測 復制代碼

運行成功

轉載于:https://juejin.im/post/5bcda1b26fb9a05d330af729

總結

以上是生活随笔為你收集整理的Vue CLI 3 脚手架搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。