webpack的简单配置vue项目

来源：互联网发布：视频解析源码编辑：程序博客网时间：2024/06/05 00:27

webpack搭建vue项目

步骤一:安装node环境 (这里不过多赘述node环境是webpack的基础)

步骤二:使用npm 命令安装 webpack :npm install webpack -g 安装webpack 的全局环境保证能全局使用

步骤三:初始化项目命令 npm init 初始化会生成package.json

步骤四:配置webpack.config.js 文件

var htmlwp =require('html-webpack-plugin');//引入组件
module.exports={
    entry:'./src/main.js',//入口文件
    output:{
        path:__dirname  + '/dist', //出口文件
        filename:'build.js'//文件的名称
    },
    module:{
        loaders:[{ //加载项
            test:/\.css$/,/*寻找文件夹中所有的.css文件*/
            loader:'style-loader!css-loader'//加载的样式
        },{
            test:/\.scss$/,//scss文件
            loader:'style-loader!css-loader!scss-loader'//从后往前执行
        },{
            test:/\.(png|jpg|gif|ttf)$/,//找这种图片 ttf是字体图标
            loader:'url-loader?limit=40000'//limit限制图片的大小
        },{
            test:/\.js$/,
            loader:'babel-loader',
            exclude:/node_modules///忽略的文件夹
        },{
            test:/\.vue$/,
            loader:'vue-loader'
        }]

        //安装服务器 npm webpack-dev-server
                    //html-webpack-plugin 保证版本一致
        //安装命令 npm install webpack-dev-server html-webpack-plugin --save-dev
    }   // "dev":"webpack-dev-server --inline --hot --open --port 4009" inline 自动刷新 hot 热加载 open自动打开 port端口号 host ip地址
    , plugins:[
new htmlwp({
title: '首页',//生成的页面标题<head><title>首页</title></head>
filename: 'index.html',//webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
template: 'index1.html'//根据index1.html这个模板来生成(这个文件请程序员自己生成)需要表示路径
})
],
babel:{
    presets:['es2015'],//预设为es5的语法
    plugins:['transform-runtime']//vue专属的插件
}

}

步骤5:安装相应的模块依赖

主要安装命令:

npm i node-sass sass-loader css-loader style-loader less less-loader url-loader file-loader babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime

--save-dev

通过这一长串命令安装了基本所需要的安装包如果需要安装其他安装包则需要安装其他的安装包

步骤6:安装开发环境的热刷新功能

npminstall webpack-dev-server html-webpack-plugin--save-dev

步骤7:配置json文件

{
"name": "dmeo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo\"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --inline --hot --open --port 4009" //其中dev是自定义脚本 通过 npm run dev 来执行这段代码
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2"
},
"dependencies": {
"nodesass": "0.0.2-security"
}
}

8，入口出口文件的编写

编写main.js 时当需要引入某css样式或者js 时使用 require() 或者 E6的 import 一个变量进行接收

例如：

import Vuefrom 'vue'
import Appfrom './App' //这里默认是引入app.vue文件
import routerfrom './router' //这里默认引入 index.js
//引入mintui组件库
import mintUIfrom 'mint-ui'
//引入 mint-ui的样式库
import '../node_modules/mint-ui/lib/style.min.css'
import '../static/css/mui.min.css'
import '../static/css/icons-extra.css'
Vue.config.productionTip =true;
//使用样式组件
Vue.use(mintUI);
/* eslint-disable no-new */
new Vue({
el: '#app',//这里使用 id为app的盒子作为vue的根组件
router, //将路由规则导入vue实例中 
template: '<App/>', //模板语法 的写法
components: { App } // 将app.vue放入入口vue对象否子组件中
});

10，路由的配置

import Vuefrom 'vue' //引入vue的核心包
import Routerfrom 'vue-router' //映入vue的路由包
import indexfrom '../components/index.vue' //引入组件
Vue.use(Router) //在vue核心包里面扩展router 包
export defaultnew Router({
routes: [
{ //配置router
path: '/', //配置router的hash值对应的
component: index //配置路由组件
}
]
})

vue项目中所有的组件都是 .vue文件利用检测path路径通过 router-view 实现页面不同的渲染过程类似 ifram设置src属性一样

所以在vue中实现路由可以由 router-link to 属性改变也可以通过 this.$router.push() 进行路由切换这种切换实现原理是一样的

阅读全文

1 0