简介:
vue-loader,来源于css-rouder、url-loader、html-loader…
后台node.js–>require exports等都是基于模块的开发
broserify 较早的模块加载器,但是只能加载js
webpack,模块加载器,一切东西皆模块,最后打包到一起
vue-loader是基于webpack的 .vue文件 由vue-loader构成的,放置vue组件代码
<template>
// html
</template><style>
// css
</style><script>
// js (普通js代码、ES6 需要通过babel-loader编译成ES5)
</script>
目录结构
|-idnex.html
|-main.js //入口文件
|-App.vue //vue文件
|-packge.json //工程文件(项目依赖,名称,配置) 用npm init --yes生成
|-webpack.config.js //webpack配置文件
ES6:模块化开发
导出模块:export default {}
引入模块:inport 模块名称 from 地址
webpack准备
cnpm install webpack
cnpm install webpack-dev-server
脚手架vue-cli
// 安装vue命令环境
npm install vue-cli -g
// 确认是否安装成功
vue --version
选择脚手架
// 1. 安装simple,不推荐
vue init simple 文件夹名
// 2. 安装webpack(大型项目) 支持Eslint检查代码规范,单源测试
vue init webpack 文件夹名
// 3. 安装webpack-simple(推荐)
vue init webpack-simple 文件夹名
配置依赖
cd 文件目录
npm install
测试运行
npm run dev
安装vue-router
// i -> install
// D -> --save-dev
// S -> --save
npm install vue-router --save