VueJs基本命令

最新推荐文章于 2025-01-12 22:31:19 发布

原创最新推荐文章于 2025-01-12 22:31:19 发布 · 323 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文介绍了如何在Vue.js项目中创建和配置vue.config.js文件，该文件位于项目根目录下，与package.json平级。内容包括基本配置选项的设置，帮助开发者自定义构建过程。

1.安装node & vue

    查看版本：     npm -v
    升级版本：     cnpm install npm -g
    安装vue：     npm install vue
    查看版本：     npm list vue

    【选填】-管理多个node-安装nvm
    【淘宝镜像】-需npm版本大于3.0： npm install cnpm -g
    #安装淘宝镜像后可 npm 改为 cnpm 例-cnpm install vue
    
2.安装vue-cli

    安装2.x【vue-cli版本】： npm install -g vue-cli
    安装3.x【vue-cli版本】： npm install -g @vue/cli

    查看版本：     vue -V
    卸载旧版本： npm uninstall vue-cli -g

3.初始化项目-新建项目

    2.x版本： vue init webpack 项目名称
    3.x版本： vue create 项目名称
    图形化安装： vue ui
    
    3.x版本可以通过以下使用2.x版本安装方式新建项目
        首先：    npm install -g @vue/cli-init
        就可以： vue init webpack 项目名称

4.项目中基本命令-切到项目目录

    可视化管理： vue ui
    编译运行：
        2.x方式运行： npm run dev
        3.x方式运行： npm run serve
    打包： npm run build

    【选填】在项目中添加插件： vue add 插件名

5.配置文件

    2.x方式： config/index.js
    3.x方式： 详见-https://cli.vuejs.org/zh/config/#publicpath

6.组件
	ElementUi： https://element.eleme.cn/#/zh-CN/component/installation
	MUI： https://dev.dcloud.net.cn/mui/
7.开发工具
	HBuilderX： https://www.dcloud.io/hbuilderx.html
	Vs code
	Sublime-Text3

vue-cli3.配置文件.在项目根目录下新建vue.config.js文件与package.json同级-复制以下内容就可以了

const path = require('path');
 
let developmentPath='./';//开发环境-npm run serve时引用文件路径
let productionPath='./';//生产环境-npm run build打包后引用文件路径
 
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? productionPath: developmentPath, // 基本路径-引用文件的路径
  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, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: true, // 开启 CSS source maps?
    loaderOptions: {
      css: {}, // 这里的选项会传递给 css-loader
      //postcss: {} // 这里的选项会传递给 postcss-loader
    }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
    requireModuleExtension: true // 启用 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://localhost/api',
        changeOrigin: true, // 允许websockets跨域
        // ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    } // 代理转发配置，用于调试环境
  },
  // 第三方插件配置
  pluginOptions: {}
}

标签

#vue