最近在做移动端的项目,最近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的严谨模式