nuxt 搭建

1、安装

npx create-nuxt-app <project name项目名称>

注：npm4.0版本已内置 npx，无需重新安装 npx
安装过程中按需选择所需要的插件

   

     

2、运行项目

npm run dev

 

3、配置本地服务（看个人需求）

>>>nuxt.config.js 文件内

server: {
    port: 3006, // 端口自定义
    host: '0.0.0.0',
  },

 

4、安装css插件 less

npm install less less-loader@版本号，本次使用7 --save-dev

注：安装完即可在页面中使用

  4.1）、配置默认css文件

    4.1.1）、根目录下新建 assets 文件 ->style->common.less

                    

 

 

     4.1.2）、配置默认css

>>>nuxt.config.js 文件内

 css: [

    'vant/lib/index.css',

    '@/assets/style/common.less', // 加上这段，全局即可使用默认样式

  ],

 

 5、配置 VW 单位（移动端适配）

安装：npm install postcss-px-to-viewport --save-dev

>>>nuxt.config.js

配置 vw：

build: {
    postcss: {
      plugins: {
        "postcss-px-to-viewport": {
          unitToConvert: "px", // 默认值`px`，需要转换的单位
          viewportWidth: 375, // 视窗的宽度,对应设计稿宽度
          // viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
          unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
          propList: ["*"], // 转化为vw的属性列表
          viewportUnit: "vw", // 指定需要转换成视窗单位
          fontViewportUnit: "vw", // 字体使用的视窗单位
          selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
          mediaQuery: false, // 允许在媒体查询中转换`px`
          minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
          replace: true, // 是否直接更换属性值而不添加备用属性
          exclude: [], // 忽略某些文件夹下的文件或特定文件
          landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: "vw", // 横屏时使用的单位
          // landscapeWidth: 1134 // 横屏时使用的视窗宽度
        },
        ........
      },
      ........
    },
    ........
  }

 6、nuxt.config.js部分配置

import reRouter from './re-router'

export default {
  loading: false, // 页面加载进度条
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'YFN',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  server: {
    port: 3006,
    host: '0.0.0.0',
  },
  // 环境变量设置
  env: {
    BASE_URL: process.env.BASE_URL,
    NODE_ENV: process.env.NODE_ENV
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'vant/lib/index.css',
    '@/assets/style/common.less'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    {src:"~/plugins/axios.js",ssr:true},
    '@/plugins/vant',
    "@/plugins/api-plugin",
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true, // 是否自动引入根目录下的组件

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    "@nuxtjs/proxy",
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    postcss: {
        plugins: {
            "postcss-px-to-viewport": {
            unitToConvert: "px", // 默认值`px`，需要转换的单位
            viewportWidth: 375, // 视窗的宽度,对应设计稿宽度
            // viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
            propList: ["*"], // 转化为vw的属性列表
            viewportUnit: "vw", // 指定需要转换成视窗单位
            fontViewportUnit: "vw", // 字体使用的视窗单位
            selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
            mediaQuery: false, // 允许在媒体查询中转换`px`
            minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
            replace: true, // 是否直接更换属性值而不添加备用属性
            exclude: [], // 忽略某些文件夹下的文件或特定文件
            landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
            landscapeUnit: "vw", // 横屏时使用的单位
            // landscapeWidth: 1134 // 横屏时使用的视窗宽度
            }
        }
    },
    extend(config, {isDev, isClient}) {
      config.module.rules.push({
        test: /\.swf$/,
        loader: "url-loader",
        options:{
          limit: 10000
        }
      });
    }
  },
  router: reRouter,
  axios: {
    proxy: true,
    prefix: '/m/api', // baseURL
    proxyHeaders: false,
    credentials: false
  },
  proxy: {
    '/m/api': {
      target: process.env.BASE_URL, // 代理地址
      changeOrigin: true,
      pathRewrite: {
        '^/m/api': '', // 将 /api 替换掉,如果请求地址中有 /api 则不必替换
      },
    },
  }
}

 7、nuxt执行流程