一、新建工程，在工程下创建src 存放文件，创建dist存放输出文件。
二、在src创建main.js为入口js文件，index.html为入口html文件。使用如下命令初始化，生成package.json文件。
npm init
信息介绍:
package name: 你的项目名字叫啥
version: 版本号
description: 对项目的描述
entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
keywirds： 项目关键字（我也不知道有啥用，所以我就不写了）
author: 作者的名字（也就是你叫啥名字）
license: 发行项目需要的证书（这里也就自己玩玩，就不写了）
三、安装webpack
//安装 webpack
npm install webpack -g
npm install webpack --save-dev
四、在项目根目录创建webpack.config.js文件.基础信息
const path = require('path')
//一旦依赖node 就npm init
module.exports = {
entry : './src/main.js', //入口文件
output : {
path : path.resolve(__dirname,'dist'), //输出目录
filename : 'bundle.js' //输出文件名
},
resolve : {
//省略后缀名
extensions : ['.js','.css','.vue'],
alias : {
'@':path.join(__dirname,'./src'),//这样 @就表示根目录src这个路径
}
},
}
五、安装vue相关插件
//vue 存全局
npm install vue --save
//vue-loader 和 compiler存本地
npm install vue-loader@14.1.1 --save--dev
npm i vue-template-compiler --save--dev
// 有可能提示安装bable,也安装上
npm install -D babel-loader @babel/core @babel/preset-env webpack
六、创建.vue插件文件为App.vue。写入内容
<template>
<div >
<p class="text">这个是第一个搭建的</p>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
.text{
color: red;
}
</style>
七、在main.js写入
// import Vue from 'vue';
import Vue from 'vue';
import App from './App.vue'
new Vue({
el : "#app",
components : {
App
},
template : '<App />'
});
八、在index.html引入编译后的文件，和定义挂载的vue载体app
<body>
<div id="app">
</div>
<script type="text/javascript" src="./dist/bundle.js" ></script>
</body>
收尾：
安装css相关的loader
npm install --save-dev style-loader
npm install --save-dev css-loader
最终的 webpack.config.js
const path = require('path')
//一旦依赖node 就npm init
module.exports = {
entry : './src/main.js', //入口文件
output : {
path : path.resolve(__dirname,'dist'), //输出目录
filename : 'bundle.js' //输出文件名
},
resolve : {
//省略后缀名
extensions : ['.js','.css','.vue'],
alias : {
// '@':path.join(__dirname,'./src')//这样 @就表示根目录src这个路径
vue: 'vue/dist/vue.js',
}
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
// options:vueloaderOptions(isDev),
// exclude:/node_modules/
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
]
}
}
最终的package.json
{
"name": "day06",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode=development",
"build": "webpack --mode=production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/preset-env": "^7.13.10",
"babel-loader": "^8.2.2",
"css-loader": "^5.1.2",
"style-loader": "^2.0.0",
"vue": "^2.6.12",
"vue-loader": "^14.1.1",
"webpack": "^5.25.0",
"webpack-dev-server": "^3.11.2",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"vue": "^2.6.12"
}
}
最后执行命令运行
npm run dev
运行效果：
image.png
