3. devDependencies:项目开发时的依赖
例:执行 npm install sass –save-dev ,即安装依赖模块 sass。
附:npm 相关说明:
npm 为 Node.js 版本管理和依赖包管理工具,通过 node 环境来安装前端构建项目所需依赖包。
npm 安装下载速度过慢,使用淘宝镜像 cnpm install 快速安装。设置方法:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org项目加载过程:

1. index.html 页面
当前构建项目为 SPA (单页面应用),index.html 页面即为入口页面,进行meta 等相关页面配置。
该页面的 <div id=”app”></div> 挂载了主组件。
2. main.js:主入口文件
注: 在 webpack.base.config 中设置 -> entry: { app: ‘./src/main.js’}
该文件初始化 vue 实例并引入相应模块 (引入前需确认在 package.json 中进行配置并安装),附 main.js 引入及说明:
import Vue from ‘vue’ // 引入vue
import App from ‘./App’ // 引入主组件App.vue
import router from ‘./router’ // 引入路由配置文件
import axios from ‘axios’ // 引入网络请求工具axios
3. App.vue:主组件
在 index.html 入口页面中挂载了主组件,并在 main.js 主入口文件中引入了主组件。
创建了其他组件 (例: /src/components/xxx.vue )后,通过路由配置即可渲染在当前主组件中。
4. 路由配置 vue-router
路由配置:将组件 (components) 映射到路由 (routes),然后告诉 vue-router 在哪里渲染它们
npm install vue-router
import Vue from ‘vue’import Router from ‘vue-router’
Vue.use(Router)
// 1.定义(路由)组件:import (当前应用中为单文件组件)。
import Home from ‘../components/Home.vue’// 2. 定义路由并创建 router 实例,然后传 `routes` 配置
// 每个路由应该映射一个组件。
var router = {}export default router = new Router({
routes: [
{
path: ‘/’,
name: ‘home’,
component: Home
}
]})// 3. 在main.js主入口文件中创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能new Vue({
el: ‘#app’,










