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:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);*

猜你喜欢

转载自blog.csdn.net/SunShinessx/article/details/86984697