首页 > 其他分享 >安装vue脚手架@vue/cli 4.5.13(稳定版)

安装vue脚手架@vue/cli 4.5.13(稳定版)

时间:2023-02-17 10:33:54浏览次数:51  
标签:4.5 13 vue cli Vue version CSS features

若 NPM 下载过慢,请参考本处改换镜像源:Here

首先新建一个 vue 测试项目,还记得以前自己是用 vue-cli 2.0的版本 去构建的,毕竟里面有默认配置好的webpack配置,但现在很多小伙伴都已经用最新的 @vue/cli 4+ 版本去开发了,因为 @vue/cli 3 以上 的版本,比 2.0 的配置文件简洁了很多,当然你还得跟上时代的脚步,不然你就被淘汰了。

但自己搭建过的小伙伴都应该知道, @vue/cli 3@vue/cli 4 默认没有vue.config.js文件,所以需要自己来创建配置。在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置,因为项目的配置比较多,这里就不分别介绍了,可以访问官方文档

这里给出一个基本的:

module.exports = {
  publicPath: "./",      // 公共路径(必须有的)
  outputDir: "dist",     // 输出文件目录
  assetsDir: "./static", // 静态资源存放的文件夹(相对于ouputDir) 一般都是static目录,不然默认的会是assets
  lintOnSave:false,      // eslint-loader 是否在保存的时候检查(果断不用,这玩意儿我都没装)
  runtimeCompiler: false,// 我用的only,打包后小些
  productionSourceMap: true, // 在生产环境会生产.map文件 设置false可以减小dist文件大小,加速构建
  devServer: {
    open: true,  // npm run serve后自动打开页面
    host: 'localhost',
    port: 8085, // 开发服务器运行端口号
    // hotOnly: true, // 热更新,
    // proxy: {
    //   '/api': {
    //     target: '127.0.0.1',
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '^/api': ''
    //     },
    //   },
    // },
  },
  chainWebpack: () => {},
  configureWebpack: () => {},
}

一、安装

如果在电脑上已经安装了 vue-cli 2.0 或者 @vue/cli 3 的话需要先卸载再重新安装

简要说明 vue-cli 2.0 @vue/cli 3
安装 npm install -g vue-cli npm install -g @vue/cli
卸载 npm uninstall -g vue-cli npm uninstall -g @vue/cli

安装指定版本

标签:4.5,13,vue,cli,Vue,version,CSS,features
From: https://www.cnblogs.com/RioTian/p/17129244.html

相关文章

  • 【2023-02-13】多份意义
    20:00人生最大的快慰是创造,一件难做的事做成了,一种闷在心里的情感或思想表现出来了,自己回头一看......看到它好,自己也充分感觉到自己的力量,越发兴起鼓舞。    ......
  • VUE&Tomcat服务器
    目录一、Vue介绍1、Vue是什么2、Vue的特点二、Vue.js的安装1、使用Vite创建三、Vue声明式渲染四、DataProperty和方法1、DataProperty2、方法五、Vue模板语法1、插值1)文......
  • vue中小写数字转大写汉字
    numTocoggle(money){//汉字的数字varcnNums=newArray('零','壹','贰','叁','肆','伍','陆','柒','捌','玖');//基本单位varcnIntRadice=ne......
  • Vue中.env|.env.development|.env.production文件说明【转载】
    0.介绍模式是VueCLI项目中一个重要的概念,默认情况下,一个VueCLI项目有三种模式:developemt模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduc......
  • vue 实现网页全屏
    screen(){constelement=document.documentElement;if(this.fullscreen){//退出全屏if(!document.exitFullscreen&&document.exitFullscreen){......
  • C语言填空:s=3+13+23+33+....+103
    #include<stdio.h>//求s=3+13+23+...+103main(){int【1】;for(i=0;【2】;i++)s=【2】;printf("s=【4】\n",s);getchar();}#include<......
  • Vue3+vite项目在局域网内通过ip在手机端访问
    使用vite启动项目后,想在手机端访问项目,此时是访问不到的在网上查阅了相关内容,小结一下1.修改vite.confifg,js(未使用ts,使用的修改vite,config.ts)exportdefaultdefineCo......
  • [LeetCode] 1139. Largest 1-Bordered Square
    Givena2D grid of 0sand 1s,returnthenumberofelementsin thelargest square subgridthathasall 1sonits border,or 0 ifsuchasubgrid doe......
  • vue生命周期和vue组件
    目录vue生命周期vue组件补充知识vue生命周期官方的生命周期图简易图从vue实例创建开始直到实例被销毁,总共经历了8个生命周期钩子【只要写了就会执行】函数钩子:反序......
  • 在 vuex 中建立一个 permission.js 文件用于合并静态和动态的路由规则
    结果会获取完整的用户的路由规则//新建一个vuex模块来专门处理权限相关操作import{constantRoutes,asyncRoutes}from"@/router";exportdefault{namespace......