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

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

一、创建项目

1. 安装Vue CLI

npm install -g @vue/cli

2. 创建项目

vue create project
cd project

二、安装插件

router

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

less

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变量

# 新建公共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

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

全局使用sass变量

# 新建公共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

npm install jquery --save-dev

局部引入

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

全局引入

# 第一种 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,// 配置jqueryconfigureWebpack: {plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","windows.jQuery": "jquery","windows.$": "jquery",Popper: ["popper.js", "default"]})]}
})
Click(){$("#c1").toggle()
}