好長一段時間沒有關注vue腳手架了，昨天因為需要個后臺模板，用腳手架
搞了一下，竟然發現指令不能用了，看官方文檔已經升級3.0，也是試的玩了一下，
大致寫寫怎么玩的！
1.先全局安裝vue-cli3.0
檢測安裝：
vue -V
2.創建項目（這個就跟react創建腳手架項目比較像了）
這里如果你是第一次用3.0版本的話，是沒有前兩個的，而只有最后兩個，這里是
讓你選的，第一個是默認配置，一般選第二個，自己配置，這里選擇最后一個
在選擇功能后，會詢問更細節的配置，
TypeScript：
是否使用class風格的組件語法：Use class-style component syntax?
是否使用babel做轉義：Use Babel alongside TypeScript for auto-detected polyfills?
CSS Pre-processors：
選擇CSS 預處理類型：Pick a CSS pre-processor
Linter / Formatter
選擇Linter / Formatter規范類型：Pick a linter / formatter config
選擇lint方式，保存時檢查/提交時檢查：Pick additional lint features
Testing
選擇Unit測試方式
選擇E2E測試方式
當你選擇后會出現上面圖上的東西，這里你可以自由選擇用哪些配置，按上下鍵
選擇哪一個，按空格鍵確定，所有的都選擇好后，按enter鍵進行下一步，這里
演示，我隨便選了幾個
下一步之后問詢問你安裝哪一種 CSS 預處理語言，你隨意選擇，我是一直用的less
上面這個是問你選擇哪個自動化代碼格式化檢測，配合vscode編輯器的
Prettier - Code formatter插件，我選的隨后一個
這里第一個選項是問你是否保存剛才的配置，選擇確定后你下次再創建新項目
就有你以前選擇的配置了，不用重新再配置一遍了
上邊這倆意思問你像，babel,postcss,eslint這些配置文件放哪？
第一個是：放獨立文件放置
第二個是：放package.json里
這里推薦放單獨配置文件，選第一個
上邊倒數第二行問你是否將以上這些將此保存為未來項目的預配置嗎？
最后一個是描述項目，你隨意選擇，點擊確定就開始下載模板了
下載好后，項目結構就變成這樣了，相比2.0精簡了很多，
然后cd 進項目，啟動服務npm run serve,
這里發現少了vue.config.js文件，那以前的配置怎么搞？
上邊是2.0的目錄結構
這個是3.0的目錄結構,比2.0少了好多，這些都放在@vue/文件下了，你可以打開看看
下邊你要做的就是在根目錄下新建一個vue.config.js文件，進行你的配置，具體配置看文檔，我在最下邊簡單羅列了幾個
當然如果你不想用3.0的話，還是可以繼續使用2.0的,官方文檔是這樣說的：
這里簡單羅列vue,config.js一些配置項
當然你配置接口地址時還是通過下邊這個來獲取
在main.js里或者單獨配置接口地址的文件里：
var env = process.env.NODE_ENVconsole.log(env)
// vue.config.js 配置說明// 這里只列一部分，具體配置慘考文檔啊module.exports = { // baseUrl type:{string} default:'/' // 將部署應用程序的基本URL // 將部署應用程序的基本URL。 // 默認情況下，Vue CLI假設您的應用程序將部署在域的根目錄下。 // https://www.my-app.com/。如果應用程序部署在子路徑上，則需要使用此選項指定子路徑。例如，如果您的應用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'. baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/', // outputDir: 在npm run build時 生成文件的目錄 type:string, default:'dist' // outputDir: 'dist', // pages:{ type:Object,Default:undfind } /* 構建多頁面模式的應用程序.每個“頁面”都應該有一個相應的JavaScript條目文件。該值應該是一 個對象，其中鍵是條目的名稱，而該值要么是指定其條目、模板和文件名的對象，要么是指定其條目 的字符串， 注意：請保證pages里配置的路徑和文件名 在你的文檔目錄都存在 否則啟動服務會報錯的*/ // pages: { // index: { // entry for the page // entry: 'src/index/main.js', // the source template // template: 'public/index.html', // output as dist/index.html // filename: 'index.html' // }, // when using the entry-only string format, // template is inferred to be `public/subpage.html` // and falls back to `public/index.html` if not found. // Output filename is inferred to be `subpage.html`. // subpage: 'src/subpage/main.js' // }, // lintOnSave：{ type:Boolean default:true } 問你是否使用eslint lintOnSave: true, // productionSourceMap：{ type:Bollean,default:true } 生產源映射 // 如果您不需要生產時的源映射，那么將此設置為false可以加速生產構建 productionSourceMap: false, // devServer:{type:Object} 3個屬性host,port,https // 它支持webPack-dev-server的所有選項 devServer: { port: 8085, // 端口號 host: 'localhost', https: false, // https:{type:Boolean} open: true, //配置自動啟動瀏覽器 // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理 proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } }, // 配置多個代理 }}啟用dll
啟用dll后，我們的動態庫文件每次打包生成的vendor的[chunkhash]值就會一樣，其值可以是 true/false,也可以制定特定的代碼庫。
module.exports = {dll: true}module.exports = {dll: ['dep-a','dep-b/some/nested/file.js']}靜態資源路徑
相對路徑
public文件夾里的靜態資源引用
# 在 public/index.html中引用靜態資源<%= 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相關配置，強烈建議先熟悉webpack-chain和vue-cli 源碼，以便更好地理解這個選項的配置項。
對模塊處理配置
// vue.config.jsmodule.exports = { chainWebpack: config => { config.module .rule('js') .include .add(/some-module-to-transpile/) // 要處理的模塊 }}修改webpack Loader配置
// vue.config.jsmodule.exports = { chainWebpack: config => { config.module .rule('scss') .use('sass-loader') .tap(options => merge(options, { includePaths: [path.resolve(dirname, 'node_modules')], }) ) }}修改webpack Plugin配置
// vue.config.jsmodule.exports = { chainWebpack: config => { config .plugin('html') .tap(args => { return [/* new args to pass to html-webpack-plugin's constructor */] }) }}eg: 在本次項目較小，只對uglifyjs進行了少量的修改，后期如果還有配置上優化會繼續添加。
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'] }} })] }) }}全局變量的設置
在項目根目錄創建以下項目：
.env # 在所有環節中執行.env.local # 在所有環境中執行，git會ignored.env.[mode] # 只在特定環境執行( [mode] 可以是 "development", "production" or "test" ).env.[mode].local # 在特定環境執行, git會ignored.env.development # 只在生產環境執行.env.production # 只在開發環境執行
在文件里配置鍵值對：
# 鍵名須以VUE_APP開頭VUE_APP_SECRET=secret
在項目中訪問：
console.log(process.env.VUE_APP_SECRET)
這樣項目中的 process.env.VUE_APP_SECRET 就會被 secret 所替代。
vue-cli 3 就項目性能而言已經相當友好了，私有制定性也特別強，各種配置也特別貼心，可以根據項目大小和特性制定私有預設，對前期項目搭建而言效率極大提升了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
