使用vue cli4快速搭建vue專案demo

2021-10-09 16:09:09 字數 1922 閱讀 5888

使用vue-cli4快速搭建乙個可用作demo的專案。

無步驟如下:

全域性安裝vue指令包:npm install -g @vue/cli

安裝之後,你就可以在命令列中訪問vue命令。你可以通過簡單執行vue --version,看看是否列印出當前安裝的vue-cli版本號,來驗證它是否安裝成功。

使用vue create vue-demo建立乙個新專案

這時候會進入命令列互動介面,選擇第一項vueconfig配置項即可快速搭建簡單的vue專案。

此時通過npm run serve即可啟動vue專案。

我們在入庫檔案main.js引入import './assets/css/common.less'是無效的,當元件在使用common.less下的變數的時候,會提示undefined。

vue官方文件給出的解決方案是配置vue.config.js檔案使得每個vue檔案自動引入全域性less檔案。

步驟如下:

專案安裝lessless-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 = }};

然後就可以在各個vue檔案中使用less中定義的變數了。

// const path = require('path');

// const vconsoleplugin = require('vconsole-webpack-plugin'); // 引入 移動端模擬開發者工具 外掛程式 (另:

// 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 =

open: false, //配置自動啟動瀏覽器

hotonly: true, // 熱更新

// proxy: 'http://localhost:8000' // 配置跨域處理,只有乙個**

proxy: ,

"/xx2/*": ,}},

// 第三方外掛程式配置

pluginoptions: }};

vueCli3以及vueCli4建立vue專案

1.首先解除安裝舊版本 npm npm uninstall vue cli g yarn yarn global remove vue cli2.更新node版本 需要8.9以上 3.安裝vue cli3 npm npm install g vue cli yarn yarn global add ...

Vue Cli4搭建Vue專案

npm install g vue cli檢視腳手架版本 隨後建立專案 vue create vue next test選擇第二個 選擇相應的配置,不要選擇linter不然會後悔的 下一步輸入y,然後選擇相應的css 然後在選擇第乙個 再輸入y,然後回車就完事了 1 npm install 2 np...

vue cli4 使用壓縮提高效能

開啟vue.config.js gzip壓縮配置 const compressionplugin require compression webpack plugin module.exports nginx http 還需開啟gzip 或使用後端spring 開啟 brotli壓縮配置 brotl...