最近在做移動端的項目,最近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的嚴謹模式
