首頁 >web前端 >js教程 >cli新建webpack模板項目

cli新建webpack模板項目

php中世界最好的语言
php中世界最好的语言原創
2018-06-07 14:38:362018瀏覽

這次為大家帶來cli新建webpack模板項目,cli新建webpack模板項目的注意事項有哪些,下面就是實戰案例,一起來看一下。

vuepress是尤大大4月12日發布的一個全新的基於vue的靜態網站生成器,實際上就是一個vue的spa應用,內置webpack,可以用來寫文檔。剛好最近需要為一些組件寫文檔,就動手擼了一波,畢竟剛發布,遇到不少坑,最終還是磕磕碰碰的運行起來了,為了避免大家踩同樣的坑,特意將搭建的過程記錄下來,分享一波。

以下是幾個已知的問題

因為util.promisify是在node 8.0之後引入的,所以如果你不想像我一樣浪費三個小時的時間,請查看並且更新node版本

建議不要使用webpack-simple的模板進行試驗,否則會各種運行不起來╮(╯▽╰)╭

#使用cli的模板如果報錯TypeError: Cannot read property 'vue' of undefined 是因為vuepress內建的webpack的vueloader使用的版本和你本地的不一樣,請將本地的版本更新到穩定最新版本

當出現安裝官方文檔部署之後一直跳到404的情況時,請使用路由的雜湊模式來存取

如遇到連接埠衝突等問題,在docs目錄下新建.vuepress資料夾,然後新建config設定檔對prot連接埠項目進行設定即可,具體可參考官方文件

開始使用

使用cli新建一個webpack模板專案

//进入项目首先安装依赖
  npm install  
  //将vue-loader进行版本替换,使其和vuepress内置的webpack里的vue-loader保持一致,否则会报错(不过尤大大已经在解决版本冲突的问题了,版本待发)
  npm update vue-loader@15.0.0-rc.2 --save-dev 
  //接下来安装vuepress
 npm install -D vuepress
 mkdir docs
 echo "# Hello VuePress!" > docs/README.md
 //最后一步启动vuepress ,进入docs目录,使用vuepress dev命令即可
 cd docs
 vuepress dev
 //使用vuepress build即可完成对项目的打包
 //接下来就是按照官方的文档,对你的网站进行各种创造啦

專案部署的話我使用的是github,具體操作請參考官方文檔

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

怎麼對json物件排序並刪除相同id資料

如何使用Angular上線一個元件

以上是cli新建webpack模板項目的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn