nuxt.js實戰之開發環境配置

1、建立項目

一、使用以下命令生成項目

vue init nuxt-community/starter-template testPro  --testPro爲項目名稱

二、進入到項目根目錄下，使用npm install 安裝依賴

三、npm run dev 在開發環境下運行項目

2、修改項目的host 和 port

在package.json文件中新增以下代碼：

"config": { "nuxt": { "host": "0.0.0.0", "port": "3333" } }, "scripts": { "dev": "nuxt" }

View Code

3、配置全局css樣式

新建~assets/css/reset.css，並在nuxt.config.js中添加以下配置：

css: ['~assets/css/reset.css']

4、在nuxt中使用sass

使用nuxt-sass-resources-loader全局引入sass

cnpm install nuxt-sass-resources-loader --save-dev

 

modules: [ 'nuxt-sass-resources-loader' ], sassResources: ['~assets/sass/resources.scss'],

5、使用sass的mixin實現動態樣式

當前位置 ~assets/sass/resources.scss

@mixin bg_img($path, $ext){ @media screen and (max-device-width: 768px){ background: url($path + '@1x.' + $ext); } @media screen and (min-device-width: 768px){ background: url($path + '@2x.' + $ext); } }

6、使用sass函數實現px2rem

一、方法一（經過插件動態的設置不一樣尺寸屏幕下的跟字體）當前位置 ~assets/sass/resources.scss

$baseFontSize: 10;//開發設備下的跟字體 @function px2rem($px){ @return $px/$baseFontSize * 1rem;
}

 添加js修改跟字體 （當前位置 ~plugins/custom/rootFontSize.js）

var ui = 750; // 本身設定的font值
var font = 20; // 獲得比例值
var ratio = ui/font;
var oHtml = document.documentElement; var screenWidth = oHtml.offsetWidth; // 初始的時候調用一次
getSize(); window.addEventListener('resize', getSize); // 在resize的時候動態設置fontsize值
function getSize(){ screenWidth = oHtml.offsetWidth; // 限制區間
  // if(screenWidth <= 320){
  // screenWidth = 320;
  // }else if(screenWidth >= ui){
  // screenWidth = ui;
  // }
  oHtml.style.fontSize = screenWidth/ratio + 'px';
}

 

使用rootFontSize.js (當前位置nuxt.config.js )

plugins: [ { src: '~plugins/custom/rootFontSize.js', ssr: false } ]

 二、方法二（使用postcss插件）

postcss-pxtorem（將px自動轉換成rem）

autoprefixer（自動爲css選擇器添加前綴）

cnpm install postcss-pxtorem autoprefixer --save-dev

nuxt.config.js中的配置以下

build: { /* ** Run ESLint on save */ extend (config, { isDev, isClient }) { if (isDev && isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } },

postcss: {
plugins: {
　　'postcss-pxtorem':{
　　   rootValue: 40,
　　   propList: ['*']
　　 }
　　},
　　preset: {
　　   autoprefixer: true
　　}
 }

}

7、實現接口代理

使用@nuxtjs/axios

npm install @nuxtjs/axios

nuxt.config.js中配置以下：

modules: ['@nuxtjs/axios'], axios: { proxy: true }, proxy: { '/api/': { target: 'http://lichunshan.top:3000', pathRewrite: {'^/api': ''}} }

8、使用第三方插件庫（vant爲例）

cnpm install vant --save

新建文件~plugins/three_sides/vant.js

vant.js文件以下：

import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);

nuxt.config.js中配置以下：

plugins: [ { src: '~plugins/three_sides/vant.js', ssr: true } ]

9、開發環境下運行

npm run build npm run start/pm2 start npm --name "nuxt-demo" -- run start