手动构建vue项目
通过webpack手动构建vue项目
- 新建一个文件夹 在这个文件夹中安装webpack
- 安装vue,vue-loader ,css-loader,vue-template-compiler
- 安装webpack-dev-serve
- 需要自己新建的文件夹有： src/index.js src/App.vue webpack.config.js
webpack.config.js 配置文件：基础的写法
const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { entry: path.join(__dirname, 'src/index.js'), output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' },{ test: /\.css$/, loader: 'css-loader' } ] }, plugins: [ new VueLoaderPlugin() ] }
scripts 脚本
"build": "webpack --config webpack.config.js" "dev":"cross-env NODE_ENV=dev webpack-dev-server" cross-env NODE_ENV这两句在bulid或者dev的时候没作用的时候加上 cross-dev三方库设置 process.env.NODE_ENV为dev 并开启webpack服务器
安装html-webpack-plugin
https://blog.csdn.net/qq_40241957/article/details/98937736
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const htmlWebpackPlugin=require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},{
test: /\.css$/,
loader: 'css-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
new htmlWebpackPlugin()
]
} - 没有引入babel的时候本身node是支持es6语法的，所以不引入babel是OK的
index.js
import App from './App.vue' import Vue from 'Vue' new Vue({ el:'#app', render: h => h(App) })
至此一个简单的手动构建Vue项目已经完成了
目录结构:
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-birdUI</title> </head> <body> <div id="app"> </div> </body> </html>package.json
{ "name": "vue-component", "version": "1.0.0", "description": "source-elementUI", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server", "build": "webpack --mode=production --config webpack.config.js" }, "author": "", "license": "ISC", "dependencies": { "vue": "^2.6.11", "webpack": "^4.44.1", "webpack-cli": "^3.3.12" }, "devDependencies": { "html-webpack-plugin": "^4.3.0", "webpack-dev-server": "^3.11.0" } }webpack.config.js
const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') const htmlWebpackPlugin=require('html-webpack-plugin') module.exports = { entry: path.join(__dirname, 'src/index.js'), output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, devServer:{ host:'localhost', port:9000, publicPath:'/', hot:true }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' },{ test: /\.css$/, loader: 'css-loader' } ] }, plugins: [ new VueLoaderPlugin(), new htmlWebpackPlugin({ template:path.join(__dirname,'./index.html'), }) ] }src/App.vue
<template> <div> 同理 </div> </template> <script> export default { name:'App' } </script> <style scoped> </style>src/index.js
import App from './App.vue' import Vue from 'Vue' new Vue({ el:'#app', render: h => h(App) })
查看5道真题和解析