主要使用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
