webpack+vue构建前端框架简单实例

拼搏现实的明天。 2022-06-03 07:42 230阅读 0赞

一：初始化项目：

1：建立根文件夹：vueindex

2：cmd进入vueindex文件夹下，安装如下依赖：

cnpm init -y    (会在vueindex根目录下创建一个package.json文件，用于存放各种目录)；

cnpm install --save vue  (局部安装VUE)；

cnpm install --save-dev webpack   (局部安装webpack);

cnpm install --save-dev webpack-dev-server  (局部安装webpack测试服务器)；

cnpm install --save-dev babel-core babel-loader babel-preset-es2015  (安装babel-loader用于将es6语法转换为浏览器可认的js代码)；

cnpm install --save-dev vue-loader vue-template-compiler (安装vue-loader用于转化vue文件为webpack可转化的代码)；

cnpm install --save-dev css-loader style-loader (安装css-loader用于转换css文件)；

二：建立项目树和内容

1：根目录下建立src文件夹（用于存放项目主内容）

2：在src文件夹下建立app.js和app.vue文件（用于存放入口js和主内容）

app.vue里的内容可以如下写：（随便举个例子而已）

<template>  
<div>  
<h1>hellow!worde!</h1>  
<ul>  
<li v-for="item in items">\{ \{ item.family \}\}</li>  
</ul>  
</div>  
</template>  
<script>  
export default\{  
data ()\{  
return   
'items':\[  
    \{'family':'ni'\},  
    \{'family':'wo'\},  
    \{'family':'ta'\}  
\]  
\}  
\}  
</script>  
<style>  
li\{  
list-style: none;  
background: red;  
\}  
</style>

app.js文件里这么写：

import Vue from 'vue'          //引入vue  
import App from './app'    //引入app.vue  
  
  
//实例化vue并实现挂在和填充内容  
new Vue(\{  
el:'\#app',  
render:h=>h(App)  
\})

三：配置webpack

1:在根目录下建立webpack.config.js文件

2：在webpack.config.js文件中如下配置：

var path=require('path');           //引入路径  
var webpack=require('webpack');     //引入webpack  
  
  
//配置webpack选项  
module.exports=\{  
//配置入口  
entry:'./src/app.js',  
//配置输出  
    output:\{  
    path:path.resolve(\_\_dirname, './dist'),  //创建dist文件夹用于存放打包的输出文件  
    publicPath: '/dist/',      
    filename:'bulid.js'    //定义输出文件的名字  
    \},  
    //配置loader  
    module:\{  
    rules:\[  
        \{  
        test:/\\.vue$/,              //配置vue-loader  
        loader:'vue-loader'  
        \},  
        \{  
        test:/\\.js$/,               //配置babel-loader  
        loader:'babel-loader',  
        exclude: /node\_modules/     //排除环境目录的js文件  
        \}  
    \]  
    \}  
\}

四：打包项目：

1：在cmd中输入webpack回车，会发现根目录下多了一个dist文件夹，里面有个bulid.js文件，这就是打包处理后的用于浏览器解析的最终文件

2：根目录下创建index.html文件用于app.vue挂载，和引用bulid.js文件，内容如下：

<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">  
<title>vue-webpack</title>  
</head>  
<body>  
    <div id="app"></div>  
    <script src="../dist/bulid.js"></script>  
</body>  
</html>

五：至此打包已完成，可以查看效果了，但是还可以利用webpack-server来实现实时监控

1:cmd中输入cnpm install -g webpack-dev-server

2:cmd中输入webpack-dev-server

3:在localhost:8080中查看所编辑页面