近日,Vue作者尤雨溪發布了正式的vue cli 3.0,基于webpack4,趕緊試一下.
文檔地址vue-cli
簡介
Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統
使用
<!-- 安裝 -->npm install -g @vue/cli<!-- 創建項目 -->npm create new-cli
然后就是配置,可默認(babel,eslint),自定義
自定義有 babel ts pwa vue-router vuex css預處理 以及Linter/Formatter,unit testing e2e testing
然后就是安裝依賴
目錄如下

沒有cli2版本的build和config,多個babel.config.js
官網介紹是可以新建個vue.config.js進行相關webpack配置,比如
// vue.config.jsmodule.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] }, //loader chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { // 修改它的選項...loader return options }) }, //生產環境關閉map productionSourceMap:false, //基本URL baseUrl: process.env.NODE_ENV === 'production' ? 'http://www.baidu.com' : 'https://www.google.com', outputDir:'dist', //build 目錄 assetsDir:'',//asset目錄 indexPath:'index.html',//指定index.html 路徑 filenameHashing:true,//文件名帶hash// multi-page模式,每個“page”應該有一個對應的 JavaScript 入口文件 pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板來源 template: 'public/index.html', // 在 dist/index.html 的輸出 filename: 'index.html', // 當使用 title 選項時, // template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title> title: 'Index Page', // 在這個頁面中包含的塊,默認情況下會包含 // 提取出來的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 當使用只有入口的字符串格式時, // 模板會被推導為 `public/subpage.html` // 并且如果找不到的話,就回退到 `public/index.html`。 // 輸出文件名會被推導為 `subpage.html`。 subpage: 'src/subpage/main.js' }, //css配置 css: { sourceMap:false,//css source map loaderOptions: { css: { // 這里的選項會傳遞給 css-loader }, postcss: { // 這里的選項會傳遞給 postcss-loader } } }, //dev server devServer: { host:127.0.0.1 port:8000, proxy: 'http://localhost:4000', overlay: { warnings: true,//警告 errors: true//錯誤 } }}其他
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答