若 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 文件来覆盖项目的配置,因为项目的配置比较多,这里就不分别介绍了,可以访问官方文档

这里给出一个基本的:

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

一、安装

如果在电脑上已经安装了 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

安装指定版本

  1. npm install -g @vue/cli@4.5.13

查询可用包的版本号

  1. npm view @vue/cli versions --json

版本查询 (检测是否安装成功)

  1. vue -V

通过上面的步骤就可完成 @vue/cli 4.5.13 的安装。

二、创建项目

  1. vue create 项目名称 (*必须是英文,不允许大写,必须是小写英文)

利用方向键 上、下来选择配置信息,点击回车进入下一步

(可以用上下键选择的忽略这步骤)如果在git Bash中不能用上下箭头选择,找到git 安装目录中 bash.bashrc 文件

然后在文件最底部加上 alias vue='winpty vue.cmd'

关闭再重新打开 git Bash 就可以上下选择啦

  1. Vue CLI v4.5.13
  2. ? Please pick a preset: Manually select features
  3. ? Check the features needed for your project:
  4. (*) Choose Vue version // 选择Vue版本
  5. (*) Babel // 代码编译
  6. ( ) TypeScript // ts
  7. ( ) Progressive Web App (PWA) Support // 支持渐进式网页应用程序
  8. (*) Router // vue路由
  9. ( ) Vuex // 状态管理模式
  10. >( ) CSS Pre-processors // css预处理
  11. ( ) Linter / Formatter // 代码风格、格式校验
  12. ( ) Unit Testing // 单元测试
  13. ( ) E2E Testing // 端对端测试

空格键 进行配置,然后 回车 进入下一步

这里我选择的是 vue2.x

  1. Vue CLI v4.5.13
  2. ? Please pick a preset: Manually select features
  3. ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors
  4. ? Choose a version of Vue.js that you want to start the project with 2.x
  5. ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

选择是否使用路由 history router,我这里选择 是

  1. Vue CLI v4.5.13
  2. ? Please pick a preset: Manually select features
  3. ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors
  4. ? Choose a version of Vue.js that you want to start the project with 2.x
  5. ? Use history mode for router? (Requires proper server setup for index fallback
  6. in production) Yes
  7. ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  8. Sass/SCSS (with dart-sass)
  9. Sass/SCSS (with node-sass)
  10. > Less
  11. Stylus

我选择 Less 编译方式

  1. Vue CLI v4.5.13
  2. ? Please pick a preset: Manually select features
  3. ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors
  4. ? Choose a version of Vue.js that you want to start the project with 2.x
  5. ? Use history mode for router? (Requires proper server setup for index fallback
  6. in production) Yes
  7. ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
  8. ? Where do you prefer placing config for Babel, ESLint, etc.?
  9. In dedicated config files
  10. > In package.json

选择 package.json

  1. Vue CLI v4.5.13
  2. ? Please pick a preset: Manually select features
  3. ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors
  4. ? Choose a version of Vue.js that you want to start the project with 2.x
  5. ? Use history mode for router? (Requires proper server setup for index fallback
  6. in production) Yes
  7. ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
  8. ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
  9. ? Save this as a preset for future projects? (y/N) n

是否保存当前选择的配置项,如果当前配置是经常用到的配置,建议选择y存储一下当前配置项。如果只是临时使用的话就不需要存储了,根据自己情况而定啦。

但是我是之前已经配置保存了,所以这里 我选 n

三、运行项目

项目创建完毕,打开文件夹

  1. cd vue
  2. npm run serve # 启动 vue 项目

安装vue脚手架@vue/cli 4.5.13(稳定版)的更多相关文章

  1. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

  2. Vue脚手架(CLI)第一天

    vue 1.脚手架的搭建(CLI) 1.1.下载nodejs,在官网, [nodejs官网地址][ https://nodejs.org/en/ ] 无脑下一步就可以了.环境自动安装 1.2.下载脚手 ...

  3. Redis 安装教程 (Windows 2.6.13 稳定版)

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  4. 08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用

    Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构. 安装3.x版本的Vue脚手架 /* npm install -g @vue/cli@3.3 */ 基于3.3版本的脚手架命令创建Vue项目 ...

  5. Vue脚手架(vue-cli)安装总结

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...

  6. Mac OS X下安装Vue脚手架(vue-cli)

    前言 Vue作为前端三大框架(Angular,React,Vue)之一,号称是最简单,最容易上手的框架,同时也是行内的大趋势,还可以用来开发最火的小程序.具有开发快,双向数据流等特点,有些人认为Vue ...

  7. 关于npm和yarn 安装vue脚手架

    第一篇博客有点小紧张.轻喷~ 第一步:安装node.js       地址 --------https://nodejs.org/en/ 详细步骤这里就不写了    可以去看     地址 ----- ...

  8. Vue脚手架最新版本安装使用

    现在很多的插件如Vant 这类的样式框架,都去兼容了Vue的3.0版本,所以我总结一下如何去简单的搭建一个Vue3.0的框架 开始 一,如何安装 在这里说明一下,Vue脚手架版本,和Vue版本是两个东 ...

  9. vue脚手架安装及依赖

    一.安装Vue Cil (脚手架) 需要先安装node.js,这是node官网地址: https://nodejs.org/en/download/ ,node有两种版本一种是稳定版一种开发版 安装完 ...

  10. npm——安装教程、安装vue脚手架

    npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题.比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并安 ...

随机推荐

  1. python列表删除元素之del,pop()和remove()

    del函数 如果知道要删除元素在列表中的位置,可以使用del语句: list_1 = ['one', 'two', 'three'] print(list_1) del list_1[0] print ...

  2. 逻辑回归(Logistic Regression) ----转载

    概要: 1. 介绍Logistic Regression的数学模型,推导并详细解释求解最优回归系数的过程:2. Python实现Logistic Regression的基本版:3. 介绍sklearn ...

  3. mysql之慢sql配置与分析

    mysql的慢查询sql是通过日志记录慢SQL--(俗称慢查询日志)默认的情况下,MySQL数据库不开启慢查询日志(slow query log),需要手动把它打开 开启慢查询日志 SET GLOBA ...

  4. 用dbeaver创建一个enum类型,并讲述一部分,mysql的enum类型的知识

    写这个博客的目的就是我在网上看了半天,发现没有这方面的知识,也许是老手认为这个太简单了,不过我还是告诉新人使用dbeaver来创建一个enum类型的方法: 就是enum("a",& ...

  5. 文心一言 VS 讯飞星火 VS chatgpt (156)-- 算法导论12.3 3题

    三.用go语言,对于给定的 n 个数的集合,可以通过先构造包含这些数据的一棵二叉搜索树(反复使用TREE-INSERT 逐个插入这些数),然后按中序遍历输出这些数的方法,来对它们排序.这个排序算法的最 ...

  6. winform中也可以这样做数据展示✨

    1.前言 在做winform开发的过程中,经常需要做数据展示的功能,之前一直使用的是gridcontrol控件,今天想通过一个示例,跟大家介绍一下如何在winform blazor hybrid中使用 ...

  7. 2023 年最后一波工具安利「GitHub 热点速览」

    2023 年还有两周就要接近尾声了,2023 年的热点速览还有一波工具好安利:比如上周推荐之后上了热榜的远程调试工具 page-spy-web,让调试像呼吸一般自然方便:还有轻量级的搜索引擎 oram ...

  8. wife-wife【原型链污染】

    wife-wife[原型链污染][难度:4] 题目界面 登录界面 注册界面 思路:在注册界面,利用原型链污染漏洞,获得管理员权限. 步骤 在注册界面输入用户名-密码-邀请码,勾选admin选项,抓包 ...

  9. vue 2实战系列 —— 复习Vue

    复习Vue 近期需要接手 vue 2的项目,许久未写,语法有些陌生.本篇将较全面复习 vue 2. Tip: 项目是基于 ant-design-vue-pro ant-design-vue-pro 由 ...

  10. 交换机SNMP配置

    配置参考v2c为例 1.华为 snmp-agent protocol source-interface vlanif 1 ##S573x以上型号交换机需要snmp-agentsnmp-agent sy ...