vue3+vue cli的使用

创建项目

npm install -g @vue/cli 或 yarn global add @vue/cli

vue create shop-mall-h5

选择配置，看个人项目需求

注意，空格键是选中与取消，A键是全选，上下键移动

• TypeScript 支持使用 TypeScript 书写源码
• Progressive Web App (PWA) Support PWA 支持。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 预处理器。
• Linter / Formatter 支持代码风格检查和格式化。
• Unit Testing 支持单元测试。
• E2E Testing 支持 E2E 测试。

区分生产、测试、生产环境

在根目录下建立.env .env.production .env.test文件

package.json

"scripts": {
    
    
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "test": "vue-cli-service build --mode test",
  "rebuild": "npm run test & npm run build"
},

在http.js修改

if (process.env.NODE_ENV === 'production') {
    
    
  // production 生产环境
  axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV === 'test') {
    
    
  // test 测试环境
  axios.defaults.baseURL = '';
} else {
    
    
  // serve 开发环境
  axios.defaults.baseURL = '';
}

全局挂载

// main.js
import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 假设 test 是外部引入的方法
const test = () => {
    
    
    console.log('test-test')
    return '测试成功'
}

const app = createApp(App)
// 添加到全局中,先挂载全局,再mount('#app')
app.config.globalProperties.$Test = test

app.use(test).use(store).use(router).mount('#app')

vue.config.js配置

const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const FileManagerWebpackPlugin = require("filemanager-webpack-plugin");

const resolve = dir => {
    
    
  return path.join(__dirname, dir)
}

// 线上打包路径，请根据项目实际线上情况
const BASE_URL = process.env.NODE_ENV === 'production' ? './' : './'

module.exports = {
    
    
  publicPath: BASE_URL,
  outputDir: process.env.NODE_ENV == "production" ? "dist" : "disttest", // 打包生成的生产环境构建文件的目录
  assetsDir: '', // 放置生成的静态资源路径，默认在outputDir
  indexPath: 'index.html', // 指定生成的 index.html 输入路径，默认outputDir
  pages: undefined, // 构建多页
  productionSourceMap: false, // 开启 生产环境的 source map?
  chainWebpack: config => {
    
    
    // 配置路径别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@com', resolve('src/components'))
  },
  css: {
    
    
    requireModuleExtension: true, // 启用 CSS modules
    extract: true, // 是否使用css分离插件
    sourceMap: false, // 开启 CSS source maps?
    loaderOptions: {
    
     // css预设器配置项
      sass: {
    
    
        prependData: `@import "@/utils/common/_variables.scss";`
      }
    }
  },
  devServer: {
    
    
    proxy: {
    
    
      '/api': {
    
    
        // 'https://www.easy-mock.com' // 设置代理,easy-mock数据
        target: 'http://www.example.org',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
    
    
          '^/api': '/'
        }
      }
    }
  },
  chainWebpack: config => {
    
    
    config
      .plugin('filemanager-webpack-plugin').use(new FileManagerWebpackPlugin({
    
     // 需要建立zips文件夹
        events: {
    
    
          onEnd: {
    
    
            delete: [
              `./zips/title-${
      
      process.env.NODE_ENV == "production" ? "正式环境" : "测试环境"
              }.zip`
            ],
            archive: [
              {
    
    
                source:
                  process.env.NODE_ENV == "production" ? "./dist" : "./disttest",
                destination: `./zips/title-${
      
      process.env.NODE_ENV == "production" ? "正式环境" : "测试环境"
                  }.zip`
              }
            ]
          }
        }
      })).end()
      .plugin('webpack-bundle-analyzer').use(new BundleAnalyzerPlugin(  // 打开打包报告
        {
    
    
          analyzerPort: 9090
        }
      ))
  }
}

动态加载本地图片

<img :src="hotSaleSvg">
<img :src="newCommoditySvg">

import hotSaleSvg from '@/assets/hotSale.svg'
import newCommoditySvg from '@/assets/newCommodity.svg'

export default {
    
    
  name: 'Home',
  components: {
    
    },
  data() {
    
    
    return {
    
    
      hotSaleSvg: hotSaleSvg,
      newCommoditySvg: newCommoditySvg
    }
  }
}