用vue－router和webpack搭建路由项目

一、用vue－cli构建初始项目

• step1：全局安装vue-cli

$ npm install --global vue-cli

• step2: 创建一个基于webpack模版的新项目

vue init webpack my-vueRouter-project1

• step3：创建项目过程中，根据提示填写项目名称，是否使用ESLint检查项目等功能，具体填写结果如下：
  

• step4： 安装依赖文件

// 进入到刚刚创建的项目目录：
cd my-vueRouter-project1
//安装package.json中的项目依赖
npm install

二、项目目录下各个文件的含义和作用

以上操作自动构建的项目目录如下

一级目录

• build文件夹和config文件夹都是和webpack配置相关

  

• node_modules文件夹：npm install 安装的依赖代码库

• src文件夹：存放项目源码，我们开发的所有代码都会放在这个目录下

  

• static文件夹：存放第三方静态资源，如reset.css等，这个文件夹中默认包含了.gitkeep文件，这个文件表示即使这个目录为空也可以把这个目录提交到代码仓库里

  

• .babelrc文件： 我们使用的是es6，通常我们通过babel将es6编译成es5