問題描述
使用vue-cli4快速搭建一個可用作demo的項目。
問題分析
無
解決方案
步驟如下：
- 全局安裝vue指令包：
npm install -g @vue/cli
安裝之後，你就可以在命令行中訪問 vue 命令。你可以通過簡單運行 vue --version，看看是否打印出當前安裝的vue-cli版本號，來驗證它是否安裝成功。
- 使用
vue create vue-demo創建一個新項目
這時候會進入命令行交互界面，選擇第一項vueConfig配置項即可快速搭建簡單的vue項目。
- 此時通過
npm run serve即可啓動vue項目。
項目配置自動引入全局less文件
我們在入庫文件main.js引入import './assets/css/common.less' 是無效的，當組件在使用common.less下的變量的時候，會提示undefined。
vue官方文檔給出的解決方案是配置vue.config.js文件使得每個vue文件自動引入全局less文件。
步驟如下：
- 項目安裝
less和less-loader
npm i less less-loader -D
- 給你的項目添加插件
vue add style-resources-loader
運行後會在命令行讓你選擇需要預處理的語言：有less，sass，scss等，這裏我們選擇less。也就是我們之後再vue.config.js中 preProcessor 對應的值。
- 在項目src同級目錄新建
vue.config.js文件，該文件會會被@vue/cli-service自動加載。vue.config.js 文件內容如下：
preProcessor: 爲你添加插件時選擇的語言。
patterns: 全局less文件路徑。
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: ['./src/assets/css/*.less'],
}
}
};
然後就可以在各個vue文件中使用less中定義的變量了。
vue.config.js的其他配置
// const path = require('path');
// const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移動端模擬開發者工具 插件 （另：https://github.com/liriliri/eruda）
// const CompressionPlugin = require('compression-webpack-plugin'); //Gzip
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器
// const baseUrl = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss資源路徑 不同環境切換控制
module.exports = {
//基本路徑
//baseUrl: './',//vue-cli3.3以下版本使用
publicPath:'./',//vue-cli3.3+新版本使用
//輸出文件目錄
outputDir: 'dist',
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
//放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。
assetsDir: '',
//以多頁模式構建應用程序。
pages: undefined,
//是否使用包含運行時編譯器的 Vue 構建版本
runtimeCompiler: false,
//是否爲 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啓用，僅作用於生產構建，在適當的時候開啓幾個子進程去併發的執行壓縮
parallel: require('os').cpus().length > 1,
//生產環境是否生成 sourceMap 文件，一般情況不建議打開
productionSourceMap: false,
devServer: {
host: 'localhost',
// host: "0.0.0.0",
port: 8000, // 端口號
https: false, // https:{type:Boolean}
open: false, //配置自動啓動瀏覽器 http://172.11.11.22:8888/rest/XX/
hotOnly: true, // 熱更新
// proxy: 'http://localhost:8000' // 配置跨域處理,只有一個代理
proxy: { //配置自動啓動瀏覽器
"/XX/*": {
target: "http://172.11.11.11:7071",
changeOrigin: true,
// ws: true,//websocket支持
secure: false
},
"/XX2/*": {
target: "http://172.12.12.12:2018",
changeOrigin: true,
//ws: true,//websocket支持
secure: false
},
}
},
// 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
// patterns: ['D:\\code\\vue-cli3-demo\\src\\assets\\css\\*.less',],
patterns: ['./src/assets/css/*.less'],
}
}
};