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

---

一、创建项目

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"`// }}}
}