1. 新建项目文件夹 myProject
2. 安装好 node(步骤在另一篇关于 react 的笔记里有)
3. 运行命令 npm init 一路回车创建 package.json
4. 运行命令 npm i ** 安装 vue,element-ui,webpack,webpack-dev-server,webpack-cli(webpack-dev-server 的热加载已转移到这个中)
5. 新建 webpack.config.js 文件, 内容为:
- const path = require('path');
- const webpack = require('webpack');
- module.exports = {
- mode: 'development',
- entry: ['babel-polyfill','./src/js/index.js'],
- output: {
- filename: 'bundle.js',
- publicPath: '/dist/',
- path: path.resolve(__dirname,'dist/js/')
- },
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- loader: 'babel-loader',
- options: {
- }
- },
- {
- test: /\.js$/,
- loader: 'babel-loader',
- exclude: /node_modules/
- }
- ]
- },
- resolve: {
- alias: {
- 'vue$': 'vue/dist/vue.esm.js'
- }
- }
- };
6. 分别新建 src(源码),build(打包后文件),index.html, 并在 src 中新建 js/index.js(入口文件) 等
7.package.json 中 scripts 中添加以下语句:
- "dev": "webpack-dev-server --open --hot",
- "build": "webpack --progress --hide-modules"
8. 运行 npm run dev 即可在浏览器中打开 index.html 页面 (注意页面在 src 同级目录下), 运行可能会出错, 会提示出缺失的模块, 按提示一路安装就行了, 例如:
Module not found: Error: Can't resolve'babel-loader'in'E:\platform'
9. 根据上面的配置, npm run dev 不会生成 dist 文件夹 (文件都生成在内存中),npm run build 才会生成
来源: http://www.qdfuns.com/note/11539/486b64b15c22ad874b852341a1ab19d0.html