Vue入门（六）---- vue-loader 、vue-cli

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39630587/article/details/79844661

简介：
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