简介：

vue-loader，来源于css-rouder、url-loader、html-loader... 后台node.js-->require exports等都是基于模块的开发 broserify 较早的模块加载器，但是只能加载js webpack，模块加载器，一切东西皆模块，最后打包到一起 vue-loader是基于webpack的 .vue文件 由vue-loader构成的，放置vue组件代码

1
2
3
4
5
6
7
8
9
10
11
<template>
// html
</template>

<style>
// css
</style>

<script>
// js  (普通js代码、ES6 需要通过babel-loader编译成ES5)
</script>

目录结构 

1
2
3
4
5
|-idnex.html
|-main.js            //入口文件
|-App.vue            //vue文件
|-packge.json        //工程文件（项目依赖，名称，配置）  用npm init --yes生成
|-webpack.config.js  //webpack配置文件

ES6：模块化开发 导出模块：export default {} 引入模块：inport 模块名称 from 地址 webpack准备

1
2
cnpm install webpack
cnpm install webpack-dev-server

脚手架vue-cli

1
2
3
4
// 安装vue命令环境
npm install vue-cli -g
// 确认是否安装成功
vue --version

选择脚手架 

1
2
3
4
5
6
// 1. 安装simple,不推荐
vue init simple 文件夹名
// 2. 安装webpack(大型项目)  支持Eslint检查代码规范,单源测试
vue init webpack 文件夹名
// 3. 安装webpack-simple(推荐)
vue init webpack-simple 文件夹名

配置依赖 

1
2
cd 文件目录
npm install

测试运行

1
npm run dev

安装vue-router 

1
2
3
4
// i ->  install
// D ->  --save-dev
// S ->  --save
npm install vue-router --save