1.安装vue的包
npm install vue -S2.由于在webpack中，推荐使用.vue这个组件模板文件定义组件，所以，需要安装能解析这种文件的loader
npm install vue-loader vue-template-complier -D3.在webpack.config.js文件中，新增loader配置项
//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: { alias: {//修改Vue被导入时候的包的路径 } } }4.在main.js中，导入vue模块
import Vue from 'vue'5.定义一个.vue结尾的组件，其中，组件由三个部分组成：template script style
6.在main.js中，导入这个组件
//login的template写在index.html或者Login.vue中任选一种方式 //若选择写在index.html里面，这里就不用引入Login.vue了 //第7步index.html的script标签里面也有说明 import login from './Login.vue'7.创建vm的实例
<!-- index.html --> <body> <div id="app"> <login></login> </div> <script> //第一种方式直接写在html页面，第二种方式是写在Login.vue里面 var login = { template: '<h1>这是登录组件</h1>' } var vm = new Vue({ el: '#app', data: { msg: '123' }, //components: {//两种写法，一种components，一种render如下方 // login //}, render: function(createElements){//createElements是一个方法，调用它，能够把指定的组件模板，渲染为html结构 return createElements(login);//这里return的结果，会替换页面中el指定的那个容器 } }) //var vm = new Vue({ // el: '#app', // data: { // msg: '123' // }, // render: c => c(login) //}) </script> </body>8.在页面中创建一个id为app的div元素，作为我们vm实例要控制的区域
9.附加package.json文件：
// 部分代码 { "name": "version": "description": "main": "scripts:{ "test": "dev": "webpack-dev-server --open --port 3000 --hot" }, "keywords": "author": "license": "devDependencies":{ "webpack": "webpack-dev-server": } }10.附加main.js文件：
//项目的js入口文件 import './css/index.css' import './css/index.scss' //如果要通过路径的形式去引入node_modules中相关的文件，可以直接忽略路径前面node_modules这一层目录，直接写包的名称，然后后面跟上具体的文件路径 //不写node_mudules这一层目录，默认就会去node_modules中查找 import 'bootstrap/dist/css/bootstrap.css' //class关键字，是css中提供的新语法，是用来实现es6中面向对象编程的方式 class Person{ //使用static关键字可以定义静态属性 //所谓的静态属性，就是可以直接通过类名，直接访问的属性 //实例属性：只能通过类的实例来访问的属性 static info = { name: 'asd', age: 20 } } //访问Person类身上的info静态属性 console.log(Person.info) //在webpack中，默认只能处理一部分es6的新语法，一些更高级的es6语法或者es7语法，webpack是处理不了的，这时候就需要借助于第三方的loader，来帮助webpack处理这些高级的语法，当第三方loader把高级语法转为低级语法之后，会把结果交给webpack去打包到bundle.js中 //通过babel，可以帮我们将高级的语法转换为低级的语法 //1.在webpack中，可以运行如下两套命令安装两套包，去安装babel相关的loader功能 //1.1第一套包：npm install babel-core babel-loader babel-plugin-transform-runtime -D //1.2第二套包：npm install babel-preset-env babel-preset-stage-0 -D //2.打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则 //2.1 { test: /\.js$/, use: 'babel-loader', exclude:/node_modules/ } //2.2注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项删除掉，原因有俩： //2.2.1如果不排除node_modules，则babel会把mode_modules中所有的第三方js文件都打包编译，这样会非常消耗CPU，同时打包速度非常慢 //2.2.2哪怕，最终babel把所有node_modules中的js转换完毕了，项目也无法正常运行 //3.在项目的根目录中，新建一个叫做.babelrc的babel配置文件，这个配置文件属于json格式，所以在写.babelrc配置的时候，必须符合json的语法规范：不能写注释，字符串必须用双引号 //3.1在.babelrc写如下的配置： //{ // "preset": ["env", "stage-0"], // "plugins": ["transform-runtime"] //} //4.目前，我们安装的bebel-preset-env，是比较新的es语法，之前我们安装的是babel-preset-es2015，现在出了一个更新的语法插件，叫做babel-preset-env，它包含了所有的和es****相关的语法 //和java c# 实现面向对象的方式完全一样了，class是从后端语言中借鉴过来的，来实现面向对象 //var p1 = new Person() //es5写法 function Animal(name){ this.name = name; } Animal.info = 123; var a1 = new Animal('Rong'); //静态属性 //console.log(Animal.info) //实例属性 //console.log(a1.name)11.附加.babelrc文件
{ "preset": ["env", "stage-0"], "plugins": ["transform-runtime"] }
*在此没有详细说明需要安装的依赖包都有哪些，按照控制台的提示，一个个安装就行了，缺哪个安哪个
*图片、字体文件、css文件没有贴出来
****可与我的另一篇文章《webpack中导入vue和普通网页使用script导入vue的区别》关联查看****
