Vue CLI创建vue项目，安装插件

一、创建项目
- [1. 安装Vue CLI](#1. 安装Vue CLI)
- [2. 创建项目](#2. 创建项目)
二、安装插件
- router
- less
- sass
- jquery

一、创建项目

1. 安装Vue CLI

javascript 复制代码

npm install -g @vue/cli

2. 创建项目

javascript 复制代码

vue create project
cd project

二、安装插件

router

javascript 复制代码

npm install vue-router
# 对于 Vue 2
npm install vue-router@3
# 或者对于 Vue 3
npm install vue-router@4

less

javascript 复制代码

npm install less less-loader --save-dev
// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 这里可以添加一些全局的 less 变量等配置
        // modifyVars: { /* 这里可以覆盖 less 变量 */ 'primary-color': '#1DA1F2', },
        javascriptEnabled: true, // 开启 JS 支持，例如使用 mixins 等功能
      },
    },
  },
};

全局使用less变量

javascript 复制代码

# 新建公共less变量文件，在其中定义所需要的全局变量，用@定义。
# 安装插件 style-resources-loader、vue-cli-plugin-style-resources-loader：
npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev
# package.json
    "less": "^4.3.0",
    "less-loader": "^5.0.0",
    "style-resources-loader": "^1.5.0",
    "vue-cli-plugin-style-resources-loader": "^0.1.5",

# 配置vue.config.js文件：
module.exports = defineConfig({
  // 全局配置使用less变量
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
          // 这个是加上自己的路径，注意此处不能使用别名路径
          path.resolve(__dirname, "./src/assets/styles/variables.less"), // 具体的文件路径
          // path.resolve(__dirname, "./src/assets/styles/*.less"), // 文件夹中的全部less文件
      ]
    }
  }
})

sass

javascript 复制代码

npm install sass sass-loader --save-dev
// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 配置选项，例如使用Dart Sass编译
        implementation: require('sass'),
      }
    }
  }
}

全局使用sass变量

javascript 复制代码

# 新建公共scss变量文件，在其中定义所需要的全局变量，用$定义。
# additionalData 是一个特定于预处理器的配置选项，用于向预处理器传递额外的数据。
# 数据值这里使用sass的 @import 指令来引入全局变量文件。
# 配置vue.config.js文件：
module.exports = {
  css: {
    loaderOptions: {
      // 单独配置scss或sass，配置scss语句结尾必须要有分号，配置sass语句结尾必须没有分号
      scss: {
        additionalData: `@import "@/assets/css/sassGlobalVars.scss";`
      },
      // sass: {
      //   // 配置选项，例如使用Dart Sass编译
      //   additionalData: `@import "@/assets/css/sassGlobalVars.sass"`
      // }
    }
  }
}

jquery

javascript 复制代码

npm install jquery --save-dev

局部引入

javascript 复制代码

<div>
	<button @click="Click">点我</button>
	<p id="c1">是我</p>
</div>
import $ from 'jquery'
Click(){
	// 直接在需要的地方直接使用即可
	$("#c1").toggle()
}

全局引入

javascript 复制代码

# 第一种 main.js（this.$）
import $ from 'jquery';
Vue.prototype.$ = $ // 绑定到vue对象上
Click(){
	// 在需要的地方使用this.$即可
	this.$("#c1").toggle()
}

# 第二种（推荐） main.js（$）
import $ from 'jquery';
window.$ = $; // 将jQuery挂载到window对象上，以便在模板中使用$
Click(){
	$("#c1").toggle()
}

# 第三种（推荐） vue.config.js
// 定义webpack变量
const webpack = require("webpack")
module.exports = defineConfig({
  transpileDependencies: true,
  // 配置jquery
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery",
        "windows.$": "jquery",
        Popper: ["popper.js", "default"]
      })
    ]
  }
})
Click(){
	$("#c1").toggle()
}

全局引入（第二种/第三种）报错error '$' is not defined no-undef，在项目根目录下新建一个.eslintignore文件，文件内容就写个 * 就行

javascript 复制代码