本文從如下鏈接轉載：https://blog.csdn.net/qq_37942845/article/details/90444784
1、安裝vue-cli3腳手架，不懂的去vue-cli官網
npm install -g @vue/cli
2、通過vue-cli3創建項目
vue create my-project
創建的過程有很多選項，我的常用選項：
簡單介紹一下:
a、Babel ：轉碼工具，有了它就可以開心的用es2015以上的代碼，那必須有！
b、Router ：前端路由，對一個單頁面來說，基本不可或缺
c、Vuex：vue狀態管理，對於稍復雜的項目來說很省力
d、eslint：代碼規范，可用可不用吧，對於團隊來說，最好是使用
>>> 下一步：
是否使用history路由模式，這個大家都懂，在路由文件也可以自己修改，暫時不用 n
>>> 下一步：
css預處理，我自己用第sass，看個人需求
>>> 下一步：
eslint，1、只報錯；2、Aribnb規范；3、Standar 規范；4、美化；
選3沒毛病
>>> 下一步：
eslint是在保存的時候還是git commit 的時候報錯？當然是保存的時候
>>> 下一步：
是否生成一個單獨的文件：ok
>>> 下一步：
是否把這些配置作為未來的預選項目，也就是下次直接可以使用，ok
>>> 下一步：
給這些配置起個名：
>>> 下一步：自動安裝依賴，等待即可，至此vue-cli3正式搭建完畢，下面安裝vant UI
3、安裝vant
安裝完cli項目后，一點要cd 進入項目目錄，安裝vant
npm install vant -S
4、安裝babel-plugin-import插件（按需加載）
# 安裝插件
npm i babel-plugin-import -D
然后再babel.config.js文件里：
// 對於使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
presets: [
'@vue/app'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// 接着你可以在代碼中直接引入 Vant 組件
// 插件會自動將代碼轉化為方式二中的按需引入形式
import { Button } from 'vant';
5、vant rem適配，需要安裝兩個插件
postcss-pxtorem 是一款 postcss 插件，用於將單位轉化為 rem
lib-flexible 用於設置 rem 基准值
postcss-pxtorem：
npm install postcss-pxtorem --save-dev
lib-flexible：
npm i -S amfe-flexible
然后： main.js 引入amfe-flexible
import 'amfe-flexible/index.js'
在postcss.config.js文件內
//修改前：
module.exports = {
plugins: {
}
}
//修改后
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
- babel-polyfill
- 安裝
$ npm install babel-polyfill --save
- 引入
// ./build/webpack.base.conf.js entry: { app: ['babel-polyfill','./src/main.js'], },
安裝less與less-loader
npm install less less-loader
修改 webpack.config.js 文件，配置loader加載依賴，讓其支持外部的less,在原來的代碼上添加
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
6、重啟項目
npm run serve
tip：1、375px 即100%寬度，寫px會自動rem處理，如果不想被rem處理，可以使用PX來寫。
---------------------
作者：勝天一子半
來源：CSDN
原文：https://blog.csdn.net/qq_37942845/article/details/90444784
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！