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的严谨模式