nuxt.js实战之开发环境配置

一、创建项目

1、使用如下命令生成项目

vue init nuxt-community/starter-template testPro  --testPro为项目名称

2、进入到项目根目录下，使用npm install 安装依赖

3、npm run dev 在开发环境下运行项目

二、修改项目的host 和 port

在package.json文件中新增如下代码：

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

三、配置全局css样式

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

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

四、在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'],

五、使用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);
  }
}

六、使用sass函数实现px2rem

1、方法一（通过插件动态的设置不同尺寸屏幕下的跟字体）当前位置 ~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
   }
]

2、方法二（使用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
　　}
 }

}

七、实现接口代理

使用@nuxtjs/axios

npm install @nuxtjs/axios

nuxt.config.js中配置如下：

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

八、使用第三方插件库（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
    }
  ]

九、开发环境下运行

npm run build

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