-
创建文件夹
打包好后，index.html 引入bundle.js文件即可 -
生成package.json
npm init
在package.json中添加脚本命令
"build": "webpack"
3.生成package-lock.json文件，不用管
npm install
- 创建webpack.config.js文件
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/,
//css-loader只负责加载，不负责解析--!
use: [ 'style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: 'img/[name].[hash:8].[ext]'
},
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
use: {
loader: 'vue-loader'
}
}
]
}
}
- 导入loader
cnpm install webpack@3.6.0 --save-dev
cnpm install --save-dev css-loader@2.0.2
cnpm install --save-dev style-loader@0.23.1
cnpm install --save-dev less-loader@4.1.0 less@3.9.0
cnpm install --save-dev url-loader@1.1.2
cnpm install --save-dev file-loader@3.0.1
cnpm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1
cnpm install vue@2.5.21 --save
cnpm install vue-loader@14.2.2 vue-template-compiler@2.5.21 --save-dev
import Vue from 'vue'
const app = new Vue({
el: '#app',
data: {
message: 'hello, vue'
}
})
runtime-only->代码中，不可以有任何的template
runtime-compiler->代码中，可以由template，因为有compiler可以用于编译template
修改配置
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
略
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
SPA(simple page web application) -> vue-router
el 和 tempate的关系
当既有template又有el时，template会进行替换之前el#app标记的内部。
import Vue from 'vue'
new Vue({
el: '#app',
template: `
<div>
{
{message}}
<button @click="btnClick">点击</button>
</div>
`,
data: {
message: 'hello, vue'
},
methods: {
btnClick: function () {
alert('111')
}
}
})
index.html
<body>
<!--真实开发，只有div，里面组件数据改变，内容一点都不改-->
<!--main.js 需要使用templates -->
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
运行时vue会将div替换成template
这样写vue会非常大！！！
Vue终极使用方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--真实开发，只有div，里面组件数据改变，内容一点都不改-->
<!--main.js 需要使用templates -->
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
import Vue from 'vue'
const App = {
template: `
<div>
<h1>{
{message}}</h1>
<input type="text" v-model="message">
<button @click="btnClick">按钮</button>
</div>
`,
data: function(){
return{
message: 'hello ,vue !'
}
},
methods: {
btnClick: function () {
alert('btnClick')
}
}
}
const app = new Vue({
el: '#app',
//2.使用组件
template: '<App/>',
//1.注册组件
components:{
App: App
}
})
root最重要的地方
终极写法,
1.创建App.Vue
<template>
<div>
<h1 class=".title">{
{
message}}</h1>
<input type="text" v-model="message">
<button @click="btnClick">按钮</button>
</div>
</template>
<script>
export default {
name: "App",
data: function(){
return{
message: 'hello ,vue !'
}
},
methods: {
btnClick: function () {
alert('btnClick')
}
}
}
</script>
<style scoped>
.title{
color: green;
}
</style>
- main.js 引用
import Vue from 'vue'
import App from './vue/App'
const app = new Vue({
el: '#app',
//2.使用组件
template: '<App/>',
//1.注册组件
components:{
App: App
}
})
转载：https://blog.csdn.net/m0_37642480/article/details/115959599
查看评论