vue-cli3.x制作app

最新推荐文章于 2024-08-18 11:52:46 发布

weixin_40313261

最新推荐文章于 2024-08-18 11:52:46 发布

阅读量383

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_40313261/article/details/95490516

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue cli3.x 使用cube-ui（第一章）

安装vue cli3.x

$ vue create jcapp //安装cli

jcapp 根目录创建，vue.config.js

安装 cube-ui

$ vue add cube-ui //安装cube-ui

vue.config.js添加



// 第三方插件配置
    module.exports = {
    publicPath: '/', // 基本路径
    outputDir: 'dist', // 输出文件目录
    lintOnSave: false, // eslint-loader 是否在保存的时候检查
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    // webpack配置
    chainWebpack: (config) => {},
    // configureWebpack: (config) => {
    // if (process.env.NODE_ENV === 'production') {
    //     // 为生产环境修改配置...
    //     config.mode = 'production'
    // } else {
    //     // 为开发环境修改配置...
    //     config.mode = 'development'
    // }
    // Object.assign(config, {
    //     // 开发生产共同配置
    //     resolve: {
    //     alias: {
    //         '@': path.resolve(__dirname, './src'),
    //         '@c': path.resolve(__dirname, './src/components'),
    //         '@p': path.resolve(__dirname, './src/pages')
    //     } // 别名配置
    //     }
    // })
    // },
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
    // css相关配置
    css: {
        extract: true,
        sourceMap: false,
        loaderOptions: {
          css: {},
          postcss: {},
          stylus: {
            'resolve url': true,
            'import': []
          }
        },
        modules: false
    },
    parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
    pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        host: 'localhost', // 允许外部ip访问
        port: 80, // 端口
        https: false, // 启用https
        overlay: {
            warnings: true,
            errors: true
        }, // 错误、警告在页面弹出
        // 代理转发配置，用于调试环境
        // proxy: {
        //   '/api': {
        //     target: 'http://www.baidu.com/api',
        //     changeOrigin: true, // 允许websockets跨域
        //     // ws: true,
        //     pathRewrite: {
        //       '^/api': ''
        //     }
        //   }
        // } 
    },
}

main.js添加

import Cube from 'cube-ui'
Vue.use(Cube)

安装 axios vue-axios 和lib-flexible postcss-px2rem（移动端rem换算）

$ cnpm i axios vue-axios -D //安装 axios vue-axios
$ cnpm i lib-flexible postcss-px2rem --D //配置自动换算rem

main.js

import VueAxios from 'vue-axios'
import axios from 'axios'
import 'lib-flexible' //计算浏览器

Vue.use(VueAxios,axios)//引用需要VueAxios在前。

vue.config.js

loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 72	//设计图是720px
              })
            ]
          },
          stylus: {
            'resolve url': true,
            'import': []
          }
        },