vue-cli3.0使用及配置（部分）

好長一段時間沒有關注vue腳手架了，昨天由於須要個後臺模板，用腳手架
搞了一下，居然發現指令不能用了，看官方文檔已經升級3.0，也是試的玩了一下，
大體寫寫怎麼玩的！

• 1
• 2
• 3
• 4

1.先全局安裝vue-cli3.0 

檢測安裝：
vue -V

• 1
• 2

2.建立項目（這個就跟react建立腳手架項目比較像了）

 

這裏若是你是第一次用3.0版本的話，是沒有前兩個的，而只有最後兩個，這裏是
讓你選的，第一個是默認配置，通常選第二個，本身配置，這裏選擇最後一個

• 1
• 2

當你選擇後會出現上面圖上的東西，這裏你能夠自由選擇用哪些配置，按上下鍵
選擇哪個，按空格鍵肯定，全部的都選擇好後，按enter鍵進行下一步，這裏
演示，我隨便選了幾個

• 1
• 2
• 3

下一步以後問詢問你安裝哪種 CSS 預處理語言，你隨意選擇，我是一直用的less

• 1

上面這個是問你選擇哪一個自動化代碼格式化檢測，配合vscode編輯器的
Prettier - Code formatter插件，我選的隨後一個

• 1
• 2

這裏第一個選項是問你是否保存剛纔的配置，選擇肯定後你下次再建立新項目
就有你之前選擇的配置了，不用從新再配置一遍了

• 1
• 2

上邊這倆意思問你像，babel,postcss,eslint這些配置文件放哪？
第一個是：放獨立文件放置
第二個是：放package.json裏 這裏推薦放單獨配置文件，選第一個

• 1
• 2
• 3
• 4

上邊倒數第二行問你是否將以上這些將此保存爲將來項目的預配置嗎？
最後一個是描述項目，你隨意選擇，點擊肯定就開始下載模板了

• 1
• 2

下載好後，項目結構就變成這樣了，相比2.0精簡了不少， 而後cd 進項目，啓動服務npm run serve, 這裏發現少了vue.config.js文件，那之前的配置怎麼搞？

• 1
• 2
• 3

 
上邊是2.0的目錄結構 
 
這個是3.0的目錄結構,比2.0少了好多，這些都放在@vue/文件下了，你能夠打開看看

下邊你要作的就是在根目錄下新建一個vue.config.js文件，進行你的配置，具體配置看文檔，我在最下邊簡單羅列了幾個

• 1

固然若是你不想用3.0的話，仍是能夠繼續使用2.0的,官方文檔是這樣說的：

• 1

這裏簡單羅列vue,config.js一些配置項 固然你配置接口地址時仍是經過下邊這個來獲取 在main.js裏或者單獨配置接口地址的文件裏： var env = process.env.NODE_ENV console.log(env)

• 1
• 2
• 3
• 4
• 5

// 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>' } },  // 配置多個代理 } }