使用webpack打包项目
1 . 首先安装好 git 和 vue 之后,检查一下是否安装成功,有这三个就代表安装成功了,可以开始了
(如果没有安装webpack的话,还要全局安装一下webpack)
npm install webpack webpack-cli –g
如果已经安装了webpack
,可以使用webpack -v
查看版本
2 . 在开始前,还需要在引入一个东西,引入 vue/cli-init
要不然后面的语句执行不了
npm install -g @vue/cli-init
3 . 开始打包项目
vue init webpack yourprojectname
vue init webpack 为固定格式,yourprojectname 代表你的项目名称(一定要注意,项目名称不能出现大写字母,可以使用横线 - 等,但是一定不能有大写字母)
输入之后,回车的步骤如图所示
结束之后会在你的文件夹下面创建一个名为 yourprojectname的项目文件夹,使用 vscode(不会有人写前端不用 vscode 吧??不会吧不会吧) 打开这个文件夹
4 . 引入并使用 less
使用 less 时有一个很重要的点就是 less 一定要使用 4.1 及以下的版本,否则报错
(1 . 引入 less 和 less-loader 的依赖,目前2020年9月引入的应该是7.0以上版本,版本太高了,没法用)
(2 . 引入 less-loader 4.1.0版本)
npm install less less-loader --save-dev
npm install less-loader@4.1.0 --save
在 build/webpack.base.conf.js 中 module 模块下添加这句话
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
}
]
}