vue2+webpack2 初始化项目

准备工作

1. 下载并安装node.js

2. 安装vue cli脚手架

npm install --g vue-cli

项目初始化

官网给出了两个模板： webpack-simple 和 webpack 。区别在于webpack-simple 没有包括Eslint 等检查功能，所以普通项目基本用webpack-simple 就足够了。于是我用webpack-simple 初始化的项目，运行之后，页面能正常显示，但是在浏览器控制台一直报错 “Failed to load resource: the server responded with a status of 404 (Not Found)”。所以还是选用了webpack。

vue init webpack vue-demo[项目名称]

初始化的时候会让选择一些东西，直接回车即可，关于测试的一些可以不选。

下载依赖

cd vue-demo  //打开项目文件夹
npm install

运行项目

npm run dev

运行成功会自动打开浏览器访问http://localhost:8080

遇到的问题

因为在学习vue的过程中，我是跟着视频学的，所以会直接用拿到课件代码，原以为npm install一下就可以，但是遇到一些问题，之后用webpack-simple还是有问题，总结如下：

1. webpack.config.js文件中loader写法问题，如：在webpack1中是loader:’vue’，网上查了现在必须loader:’vue-loader’，但是我在官网查了是这样use:’vue-loader’。
2. 如果要使用css还必须在webpack.config.js中配置，真是麻烦。

但是，我自己用本文的方法初始化项目没有报错，试了一下引入一个css库（elementUI）也可以正常使用。如果像我一样不是很熟悉配置的大白，只想初始一个项目，玩一玩vue，推荐大家用webpack，不要用webpack-simple。