主要使用npm+webpack
1、创建项目
mkdir hello-world
npm init
2、创建入口文件
创建src目录，下面创建main.js文件
alert('hello vue')接着创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Webpack</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>3、安装webpack
npm install -g webpack webpack-cli
4、webpack配置
在根目录下创建webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
clean: true,
}
}5、修改package.json
修改package.json，将scripts修改为如下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack"
}6、测试打包是否成功
执行npm run build
7、安装html-webpack-plugin插件
npm install html-webpack-plugin -D
8、修改webpack.config.js
修改后为
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
clean: true,
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' })
]
}9、安装vue
npm install -g vue vue-router
10、安装vue文件的打包插件
npm install vue-loader vue-template-compiler -D
3719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
