webpack+vue.js构建项目
webpack+vue.js构建项目
新的改变
作为vue.js初学者,结合webpack自己从零开始搭建一个项目。
一、webpack安装.
当然,在这之前,你得先安装好node.js。
1、npm安装webpack。
npm install -g webpack //全局安装
npm install -g webpack-dev-server //安装调试工具
2、创建项目
结合vue-cli的启发,创建项目如下
- cmd创建项目
- mkdir vueframe //创建项目文件夹
- cd vueframe //进入该文件目录下
然后npm init,一直回车即可
之后在目标文件中可以看到 package.json文件。
二、安装项目依赖
这里我们可以手动在package.json文件中添加相应的依赖,然后命令运行npm install。也可以使用命令npm install fileName --save-dev,来进行相关的依赖文件安装,我这里用npm 安装项目依赖
npm i vue vue-loader -D
npm i style-loader css-loader -D//由于我引入了css,所以需要安装此项目依赖
安装成功后我们可以在目录下检查
package.json文件我的代码如下
{
"name": "vueframe",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1",
"vue": "^2.6.8",
"vue-router": "^3.0.2"
}
}
三、配置webpack.config.js,手动创建配置。
const path = require('path');
module.exports={
mode:"development",
entry:{
app:'./src/app.js'
},
output:{
path:path.resolve(__dirname,'./dist'),
filename:"[name].min.js"
},
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
}
四、按照下图,构建项目
1、创建一个index.html,代码如下
<div id="app">
<router-view name='header'></router-view>
<router-view></router-view>
<router-view name='footer'></router-view>
</div>
<script src="dist/app.min.js"></script>
2、在vueframe目录下,新建一个src文件夹,新建app.js,以及router.js(主要放路由),新建components文件夹存放组件
-
app.js代码如下
import Vue from 'vue/dist/vue.esm';//要注意使用webpack引入vue.esm.js,而不是vue.js import VueRouter from 'vue-router'; import router from './router'; import '../css/main.css' Vue.use(VueRouter) new Vue({ el:"#app", router, data:{ } })
-
router.js代码如下
import VueRouter from 'vue-router';
import header from './components/header';
import new1 from './components/news1';
import new2 from './components/new2';
import footer from './components/footer';
export default new VueRouter({
routes:[
{
path:'/index',
name:'index',
components:{
header:header,
default:new1,
footer:footer
}
},{
path:'/news',
name:'news',
components:{
header:header,
default:new2,
footer:footer
}
}
]
})
- footer.js代码如下
export default {
template: `
<div class="footer">
this is footer
</div>
`
}
header.js,new1.js,new2.js代码跟footer.js形式差不多,就不贴出来来了
五、最终实现
-
webpack
刚开始写博文,有什么不对或者用词不当的地方,欢迎留言指正。