两种方法都需要安装 node
vue-cli
用脚手架搭建vue项目非常简单快速,先安装vue-cli
npm install vue-cli -g
然后 vue init webpack 项目名
即可
手动配置
- 在命令框中cd到目的文件夹下
npm init -y
创建项目的package.json文件 - 局部安装webpack,并进行配置
npm install webpack webpack-cli -D
- 安装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