webpack vuejs項目學習心得


最近在做移動端的項目,最近webpack和vuejs很火,就想到了用vuejs webpack來構建我的項目

先了解了一些webpack的入門基礎

http://webpack.github.io/docs/   webpack官方文檔

https://zhuanlan.zhihu.com/p/20367175 webpack傻瓜式入門一

https://zhuanlan.zhihu.com/p/20397902  傻瓜式入門(二)  

看完入門教程,懂得了webpack的一些基本配置和插件的使用。

 

后面又去看了vue.js官方文檔 http://cn.vuejs.org/

 

中途遇到了很多問題,webpack引入第三方插件庫失敗,例如swiper zepto等等

 后來用了vuejs官方的vue-cli腳手架

# 安裝vue-cli
npm install -g vue-cli
 
# 使用vue-cli初始化項目
vue init webpack my-project
 
# 進入到目錄my
cd my-project
 
# 安裝依賴
npm install
 
# 開始運行
npm run dev # tada!
 
# 打包壓縮生成文件
npm run build
 
關於vue cli,使用vue-cli官方模板,vue-cli腳手架自帶了Eslint驗證,Eslint驗證比較嚴謹
容易犯錯的地方:
1. 函數名字與括號之間要有空格。
2. 不要使用雙引號
3. 不要有多月的空行
4.函數參數的逗號后要有空格
5.每個結束語句以后不用加“分號”
 
在webpack.base.conf.js里面刪掉下面:
preLoaders: [
  {
     test: /\.vue$/,
     loader: 'eslint',
     include: projectRoot,
    exclude: [/node_modules/, /ignore_lib/]
  },
  {
    test: /\.js$/,
    loader: 'eslint',
    include: projectRoot,
    exclude: [/node_modules/, /ignore_lib/]
  }
]
可以去掉vue-cli的嚴謹模式


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM