1、創(chuàng)建項(xiàng)目
yarn create nuxt-app <項(xiàng)目名>
2垮刹、修改項(xiàng)目的host 和 port
在package.json文件中新增如下代碼：
"config": {
"nuxt": {
"host": "192.168.124.4", // 此處可以改成自己的ip
"port": "1818" // 端口可以隨意更改
}
},
3达吞、在nuxt中使用sass
yarn add node-sass sass-loader -D
yarn add node-sass@5.0.0 sass-loader@10.1.1 -D 指定版本安裝
注意：可能node-sass sass-loader版本過(guò)高，導(dǎo)致報(bào)錯(cuò)荒典。nuxt webpack版本好像是4.0酪劫，反正如果報(bào)錯(cuò)就降版本
"node-sass": "5.0.0",
"sass-loader": "10.1.1"
4、引入scss全局變量或函數(shù)
yarn add --save-dev @nuxtjs/style-resources
修改nuxt.config.js配置
export default {
modules: [
'@nuxtjs/style-resources',
],
styleResources: {
scss: './assets/variables.scss',
less: './assets/**/*.less',
// sass: ... 需要什么配置什么寺董，這里是全局的 根據(jù)需要配置覆糟，沒(méi)有可以不配置
}
}
5、使用第三方插件庫(kù)vant
安裝
yarn add vant -S
在plugins文件夾中新建文件vant.js
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
修改nuxt.config.js配置
plugins: [
'@/plugins/vant'
]
css: [
'vant/lib/index.css',
]
6遮咖、Rem 布局適配
1滩字、安裝postcss-pxtorem lib-flexible
yarn add postcss-pxtorem lib-flexible --save-dev
yarn add postcss-pxtorem -D
2、配置lib-flexible
在plugins文件夾中新建文件lib-flexible.js
寫入代碼：import 'lib-flexible'
修改nuxt.config.js配置
meta: [
{ charset: 'utf-8' },
// { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 這個(gè)要注釋御吞，用lib-flexible自動(dòng)生成的viewport
{ hid: 'description', name: 'description', content: '' }
]
plugins: [
{
src: '@/plugins/lib-flexible',
ssr: false //不設(shè)置會(huì)報(bào)錯(cuò)
}
]
3麦箍、配置postcss-pxtorem
修改nuxt.config.js配置
build: {
postcss: {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
}
}
}
注意：postcss-pxtorem高版本會(huì)報(bào)錯(cuò)：Error: PostCSS plugin postcss-pxtorem requires PostCSS 8
具體原因不知道
解決辦法：老規(guī)矩，降版本
yarn add postcss-pxtorem@5.1.1 -D
7陶珠、配置初始化css
assets\css\common.css
/*
---------------------------------------
【樣式初始化】
---------------------------------------
*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form,input,table,tr,td,dl,dt,dd,img,div{margin:0;padding:0;border:0;}
body{font:13px/25px Arial;background:#FFF;}
ol,ul{list-style-type:none;}
img{vertical-align:middle; display:inline-block;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
strong {font-weight: normal;}
select,button,textarea,input[type=submit]{font-family: 'Microsoft YaHei';cursor:pointer;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #CCC;}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance: none;}
table{border-collapse:collapse;}
a{text-decoration:none;color:#333;cursor: pointer;outline:none;-moz-outline-style:none;text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
em,i{font-style: normal;}
img {max-width: 100%;}
:focus{outline:0;}
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{*height:1%;*clear: both;}
.none {display: none;}
.left {float: left;}
.right {float: right;}
.hidden {overflow: hidden;}
html,body,.app,.word {height: 100%;}
修改nuxt.config.js配置
css: [
'~assets/css/common.css',
]
8挟裂、啟動(dòng)項(xiàng)目選擇隱藏
// 去掉每次啟動(dòng)提示Are you interested in participating? (Y/n)
"telemetry": false,
