webpack+vue+vueRouter+vuex 项目demo（附截图、代码、入门篇）

本项目主要复习vue+webpack+vue-router+vuex的基础知识。学习后有一个总体概念，详细内容看官网。

>开始（确认已经安装node环境和npm包管理工具）

1、新建项目文件名为demo

2、npm init -y 初始化项目

>安装项目依赖

3、npm install --save vue 默认安装最新版vue

4、npm install --save-dev webpack webpack-dev-server 安装webpack，webpack-dev-server（是一个小型的Node.js Express服务器）

*拓展：npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install --save另一个是 npm install --save-dev，他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下，
--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。*

 

>编辑项目目录以及添加代码

11、文件目录如下；

src:整个项目的代码存放目录

//dist文件是后面执行webpack指令生产的，不用管；

//webpack.config.js 配置文件，本身也是一个标准的Commonjs规范的模块；

//router 路由目录；

//index.html首页入口文件

//App.vue是项目入口文件。

//main.js这是项目的核心文件。全局的配置都在这个文件里面配置。

//commponents目录里面放了组件，提醒vue组件化开发的思想。

//views 项目页面存放目录

//store 存放vuex文件的目录；

 

代码
//webpack.config.js
*注释：
test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须） 
loader：loader的名称（必须） 
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；*