---

一、創建項目

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()
}

全局引入（第二種/第三種）報錯error '$' is not defined no-undef，在項目根目錄下新建一個.eslintignore文件，文件內容就寫個 * 就行

*