vue1.0+webpack搭建项目,vue1.0要与指定版本的webpack结合才能正确运行,与vue2.0项目的依赖有很大的不同,vue1.0项目相关依赖如下。
{
"name": "first",
"version": "1.0.0",
"description": "first vue",
"main": "node index.js",
"scripts": {
"test": "node test.js",
"server": "webpack-dev-server --content-base ./ --port 8000"
},
"repository": {
"type": "git",
"url": "https://github.com/zyw327/vue1.0.git"
},
"keywords": [
"vue"
],
"author": "smart zeng",
"license": "MIT",
"bugs": {
"url": "https://github.com/zyw327/vue1.0/issues"
},
"homepage": "https://github.com/zyw327/vue1.0/blob/master/README.md",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.10",
"vue": "^1.0.28",
"vue-html-loader": "^1.2.4",
"vue-loader": "^8.7.0",
"vue-style-loader": "^4.0.2",
"webpack": "^2.4.1",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^2.4.5"
}
}
webpack的配置如下:
const path = require('path');
module.exports = {
entry: './app/main.js',
output:{
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'public'
},
module: {
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
},{
loader: 'css-loader',
options: {
modules: true
}
}]
},{
test: /\.jsx?$/,
exclude: [
path.resolve(__dirname, 'node_modules')
],
loader: 'babel-loader',
options: {
presets: ['es2015']
}
},{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader'
}
}
}]
}
};
main.js
import Vue from "vue";
import IndexCompany from "./components/index.vue";
new Vue({
el: "#app",
data(){
},
components: {
IndexCompany
}
});
index.vue如下
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
data(){
return {
msg: 'add'
};
}
}
</script>
<style>
div{
background: black;
color: white;
}
</style>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue学习</title>
</head>
<body>
<div id="app">
<index-company></index-company>
</div>
<script type="text/javascript" src="public/bundle.js"></script>
</body>
</html>
目录结构如下: