原文链接:https://www.cnblogs.com/chunshan-blog/p/9950474.html
一、创建项目
1、使用如下命令生成项目
vue init nuxt-community/starter-template testPro --testPro为项目名称
2、进入到项目根目录下,使用npm install 安装依赖
3、npm run dev 在开发环境下运行项目
二、修改项目的host 和 port
在package.json文件中新增如下代码:
View Code
三、配置全局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
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码
六、使用sass函数实现px2rem
1、方法一(通过插件动态的设置不同尺寸屏幕下的跟字体)当前位置 ~assets/sass/resources.scss
$baseFontSize: 10;//开发设备下的跟字体 @function px2rem($px){ @return $px/$baseFontSize * 1rem; }
添加js修改跟字体 (当前位置 ~plugins/custom/rootFontSize.js)
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码
使用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: [ require('postcss-pxtorem')({ rootValue: 10, propList: ['*'] }), require('autoprefixer')({ browsers: ['Android >= 4.0', 'iOS >= 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': '/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