1.安装vue的包
npm install vue -S2.由于在webpack中，推荐使用.vue这个组件模板文件定义组件，所以，需要安装能解析这种文件的loader
npm install vue-loader vue-template-complier -D3.在webpack.config.js文件中，新增loader配置项
{ test: /\.vue$/, use: ['vue-loader'] },//处理.vue文件的loader4.在main.js中，导入vue模块
import Vue from 'vue'5.定义一个.vue结尾的组件，其中，组件由三个部分组成：template script style，如下Login.vue文件所示
6.在main.js中，导入这个组件
import login from './Login.vue'7.创建vm的实例，详见main.js文件
var vm = new Vue({ el: "#app", data: { msg: '123' }, render: c => c(login) })8.在页面中创建一个id为app的div元素，作为我们vm实例要控制的区域，如下index.html文件所示
----区别主要在以下四个文件中，两种方式都写在注释里面了----
main.js文件：
//如何在webpack构建的项目中，使用vue进行开发 //在普通网页中如何使用vue： //1.使用script标签，引入 vue的包； //2.在index页面中，创建一个id为app的div容器 //3.通过new Vue得到一个vm的实例 //在webpack中尝试使用Vue: //在webpack中，使用import Vue from 'vue'导入的Vue构造函数，功能不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式 //import Vue from 'vue' import Vue from '../node_modules/vue/vue.js' //包的查找规则： //1.找项目根目录中有没有node_modules的文件夹 //2.在node_modules中根据包名，找对应的vue文件夹 //3.在vue文件夹中，找一个叫做package.json的包配置文件 //4.在package.json文件中，查找一个main属性(main属性指定了这个包在被加载时候的入口文件) //第一种方式如下，第二种方式是写在Login.vue里面 //var login = { // template: '<h1>这是login组件，是使用网页形式创建出来的组件</h1>' //} //1.导入login组件 import login from './Login.vue' //默认webpack无法打包.vue文件，需要安装相关的loader //npm install vue-loader vue-template-complier -D //在配置文件中，新增loader配置项{ test: /\.vue$/, use: 'vue-loader' } var vm = new Vue({ el: "#app", data: { msg: '123' }, //components: {//两种写法，一种components，一种render如下方 // login //}, //在webpack中，如果想要通过vue把一个组件放到页面去展示，vm实例中的render函数可以实现 //components方式不会替换html容器中的其他元素，比如p标签里面的内容，render方式会替换整个容器 render: function(createElements){//createElements是一个方法，调用它，能够把指定的组件模板，渲染为html结构 return createElements(login);//这里return的结果，会替换页面中el指定的那个容器 } //简写 //render: c => c(login) })webpack.config.js文件：
//webpack.config.js //由于webpack是基于node构建的，所以，在webpack的配置文件中，任何合法的node代码都是支持的 var path= require('path'); //在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部 //如果要配置插件，需要在导出的对象中，挂载一个plugins节点 var htmlWebpackPlugin = require('html-webpack-plugin'); //当以命令行形式运行webpack或webpack-dev-server的时候，工具会发现，我们并没有提供要打包的文件的入口和出口文件，此时他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个对象，进行打包构建 module.export = { entry: path.join(__dirname,'./src/main.js'),//入口文件 output: {//指定输出选项 path: path.join(__dirname, './dist'),//输出路径 filename: 'bundle.js' //指定输出文件的名称 }, plugins: [//所有webpack插件的配置节点 new htmlWebpackPlugins({ template: path.join(__dirname, './src/index.html'),//指定模板文件路径 filename: 'index.html'//设置生成的内存页面的名称 }) ], module: {//配置所有第三方loader模块 rules:: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的loader (npm install style-loader css-loader -D) { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },//处理less文件的loader (npm install less-loader less -D) { test: /\.scss$/, use: ['style-loader', 'css-loader'], 'sass-loader' },//处理scss文件的loader (npm install sass-loader node-sass -D) { test: /\.(jpg|png|gif|bmp|jpeg})$/, use: ['url-loader?limit=7631&name=[hash:8]-[name].[ext]'] },//处理图片路径的loader (npm install url-loader file-loader -D) //limit给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式的字符串，如果图片小于给定的limit值，则会被转为base64的字符串 { test: /\.(ttf|eot|svg|woff|woff2)$/, use: ['url-loader'] },//处理字体文件的loader { test: /\.js$/, use: ['babel-loader', exclude: /node_modules/] },//配置babel来转换高级的es6语法 { test: /\.vue$/, use: ['vue-loader'] },//处理.vue文件的loader ] }, resolve: {//两种方法，一种resolve alias;一种在main.js文件直接import Vue from '../node_modules/vue/vue.js' alias: {//修改Vue被导入时候的包的路径 //"vue$": "vue/dist/vue.js" //此例采用第二种方法main.js直接引入，先注释这行 } } }index.html文件：
<body> <div id="app"> <p>{{msg}}</p> <login></login> </div> </body>Login.vue文件：
<template> <div> <h1>这是登录组件，使用.vue文件定义出来的</h1> </div> </template> <script> </script> <style> </style>********可与我的另一篇文章《webpack中如何使用vue》关联查看****
