搭建vue项目

两种方法都需要安装 node

vue-cli

用脚手架搭建vue项目非常简单快速，先安装vue-cli

npm install vue-cli -g

然后 vue init webpack 项目名 即可

手动配置

1. 在命令框中cd到目的文件夹下 npm init -y 创建项目的package.json文件
2. 局部安装webpack，并进行配置npm install webpack webpack-cli -D
3. 安装webpack插件，配置webpack.config.js

npm install html-webpack-plugin -D
npm install webpack-dev-sev -D //自动重新构建，自动刷新服务器

4.安装可以实现.css、.less、.sass文件的编译的loader

npm install style-loader css-loader -D
npm install node-sass sass-loader -D
npm install less less-loader -D
npm install stylus stylus-loader -D

5.图片加载器安装

npm install file-loader url-loader -D

6.对es6编译为es5, 创建配置文件 .babelrc.json

npm install @babel/core @babel/preset-env -D
npm install babel-loader -D
npm install @babel/plugin-transform-runtime @babel/runtime -D

7.由于webpack 不能直接编译.vue文件，所以需要安装

npm install vue-loader vue-template-complier

8.配置webpack.config.js以及在package.json中进行编译命令的配置。

更具体的内容参见 https://blog.csdn.net/weixin_43196993/article/details/88781650