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

最新推荐文章于 2024-08-06 23:19:14 发布

wangle_style

最新推荐文章于 2024-08-06 23:19:14 发布

阅读量982

点赞数

分类专栏： vue.js 前段环境搭建文章标签：前端 vue webpack

vue.js 同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

前段环境搭建

5 篇文章 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中查看所编辑页面