VUE3.0项目开发流程

const path = require('path')

module.exports = {
    publicPath: './', // 基本路径
    outputDir: 'dist', // 输出文件目录
    lintOnSave: true, // 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, // 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false, // 开启 CSS source maps?
        loaderOptions: {
            sass: {
                prependData: `@import "./src/assets/styles/main.scss";`
            }, // 这里的选项会传递给 css-loader
            // postcss: {} // 这里的选项会传递给 postcss-loader
        }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
        modules: false // 启用 CSS modules for all css / pre-processor files.
    },
    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: '0.0.0.0', // 允许外部ip访问
        port: 8080, // 端口
        https: false, // 启用https
        overlay: {
            warnings: true,
            errors: true
        }, // 错误、警告在页面弹出
        proxy: {
            '/api': {
                target: 'http://www.baidu.com/api',
                changeOrigin: true, // 允许websockets跨域
                // ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        } // 代理转发配置，用于调试环境
    },
    // 第三方插件配置
    pluginOptions: {}
}

// css相关配置
    css: {
        extract: true, // 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false, // 开启 CSS source maps?
        loaderOptions: {
            sass: {
                prependData: `@import "./src/assets/styles/main.scss";`
            }, // 这里的选项会传递给 css-loader
            // postcss: {} // 这里的选项会传递给 postcss-loader
        }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
        modules: false // 启用 CSS modules for all css / pre-processor files.
    },

@import "./normalize.scss"; 

npm i element-ui -S

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 引入ElementUI
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

// 引入公共组件
import "./components";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

import VueCompositionApi from '@vue/composition-api';
Vue.use(VueCompositionApi);

const obj = reactive({count:0});

const number = ref(0);
console.log(number.value); //取值方式

// isRef 举例
const unwrapped = isRef(foo)?foo.value.foo;

//toRefs举例
function useMousePosition(){
  const pos = reactive({
    x:0,
    y:0
  })

  return toRefs(pos);
}
const {x,y} = useMousePosition();

npm install axios --save

import axios from 'axios';

const nodeEnv = process.env.NODE_ENV;
let baseURL = '';
if(nodeEnv == 'development' ){
  baseURL =  "https://www.rufeike.top";
}else if(nodeEnv == 'production') {
  baseURL =  "https://www.rufeike.top";// 生产开发接口
}
// 创建axios,赋值位service
const service = axios.create({
  baseURL: baseURL,
  timeout: 1000
});

// 添加请求拦截器
service.interceptors.request.use(function (config) {
  // 在发送请求之前需要做什么
  return config;
}, function (error) {
  // 请求错误时
  return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
  // 对响应结果进行处理
  return response;
}, function (error) {
  // 响应错误
  return Promise.reject(error);
})

export default service;

APP_NAME = rfApp

import cookie from "cookie_js";

// 存储
cookies.set("name", "value")； // 普通设置

cookies.set("name", "value", { expires: 7, path: '' });    //   expires:7天过期 ， path: 应用的页面路径

cookies.set("name", { foo: "bar" });   //  设置一个json

// 取值
cookie.get("键"); // 获取指定键名的cookie
cookie.get(); // 获取所有

// 移除
cookie.remove("键");