1、新建项目文件夹,执行npm init 初始化 package.json

webpack4从零搭建vue项目

2、安装webpack依赖

npm install --save-dev webpack webpack-cli webpack-dev-server

webpack4从零搭建vue项目

3、安装vue

npm install -D vue vue-loader vue-template-compiler

webpack4从零搭建vue项目

4、配置css、模板依赖

npm i style-loader css-loader vue-template-compiler

webpack4从零搭建vue项目

5、config详细配置:在最外层目录下创建webpack.config.js

webpack4从零搭建vue项目

webpack4从零搭建vue项目

webpack4从零搭建vue项目

6、创建项目目录文件

1)创建src文件夹,在src目录下创建app.vue

webpack4从零搭建vue项目

2)在src目录下创建index.js文件,作为项目入口文件

webpack4从零搭建vue项目

3)在src同级目录下创建index.html文件,作为html入口

webpack4从零搭建vue项目

7、在package.json文件中添加启动命令和打包命令:

webpack4从零搭建vue项目

8、运行项目

webpack4从零搭建vue项目

webpack4从零搭建vue项目

 

 

 

 

 

 

相关文章: