下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:vuecli3的项目搭建,包含vue.config.js常用配置

作者:smile_or     来源: https://www.cnblogs.com/sgs123/p/11466382.html点击数:890发布时间: 2020-03-03 11:01:46

标签: 技术开发视频APP视频vue

Web开发

  插件(Plug-in,又称addin、add-in、addon或add-on,又译外挂)是一种遵循一定规范的应用程序接口编写出来的程序。其只能运行在程序规定的系统平台下(可能同时支持多个平台),而不能脱离指定的平台单独运行。

  1、卸载旧版本

  npmuninstallvue-cli-g或者yarnglobalremovevue-cli

  2、安装cli3脚手架

  npminstall-g@vue/cli或者yarnglobaladd@vue/cli

  注意:

  要求node版本>=8.9

  vue查看版本号------vue-V

  node查看版本号-----node-v

  3、安装支持运行独立的.vue文件

  需安装npminstall-g@vue/cli-service-gloabal

  运行文件vueserve<文件名>

  4、新建项目

  vuecreate<项目名字>//不支持驼峰

  也可使用图形化界面搭建vueui

  5、安装插件

  vueadd<插件名>

  6、cli常用配置(vue.config.js)

  constpath=require('path');

  constresolve=(dir)=>path.join(__dirname,dir);

  module.exports={

  publicPath:'./',//打包路径,使用相对路径生成的dist文件夹下的index可以打开

  //输出文件目录

  outputDir:'dist',

  //取消生成map文件

  productionSourceMap:false,

  //webpack-dev-server相关配置

  devServer:{

  open:true,

  host:'0.0.0.0',

  port:8080,

  httPS:false,

  hotOnly:false,

  proxy:null,//设置代理

  before:app=>{}

  },

  chainWebpack:config=>{

  config.resolve.alias

  .set('@',resolve('src'))

  .set('common',resolve('src/common'))

  .set('utils',resolve('src/utils'))

  },

  //第三方插件配置

  pluginOptions:{

  //1)vue-cli3使用less全局变量

  //需安装vueaddstyle-resources-loader

  'style-resources-loader':{

  preProcessor:'less',

  patterns:[

  path.resolve(__dirname,'./src/common/less/index.less'),

  //这个是加上自己的路径,

  ]

  }

  }

  }

  插件的定位是开发实现原纯净系统平台、应用软件平台不具备的功能的程序,其只能运行在程序规定的系统平台下(可能同时支持多个平台),而不能脱离指定的平台单独运行。因为插件需要调用原纯净系统提供的函数库或者数据。

赞(15)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程