webpack手把手搭建vue项目,并实现webpack使用less编写css

使用webpack打包项目

1 . 首先安装好 git 和 vue 之后,检查一下是否安装成功,有这三个就代表安装成功了,可以开始了
在这里插入图片描述
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',
          }
        ]
      }

在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页