若 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

安装指定版本

npm install -g @vue/cli@4.5.13

查询可用包的版本号

npm view @vue/cli versions --json

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

vue -V

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

二、创建项目

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

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

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

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

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

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

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

这里我选择的是 vue2.x

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

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

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

我选择 Less 编译方式

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

选择 package.json

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

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

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

三、运行项目

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

cd vue
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. Java八股面试整理(3)

    21.说一说hashCode()和equals()的关系 hashCode()用于获取哈希码(散列码),eauqls()用于比较两个对象是否相等,它们应遵守如下规定: 如果两个对象相等,则它们必须有相 ...

  2. The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission,iphone手机video标签报错

    The request is not allowed by the user agent or the platform in the current context, possibly becaus ...

  3. [GDOIpj222A] 点指兵兵

    第一题 点指兵兵 提交文件: bing.cpp 输入文件: bing.in 输出文件: bing.out 时间空间限制: 1 秒, 256 MB 你一定有过在两个物品之间犹豫不决的时候,想要借助一些方 ...

  4. [ABC265C] Belt Conveyor

    Problem Statement We have a grid with $H$ horizontal rows and $W$ vertical columns. $(i, j)$ denotes ...

  5. Markdown References

    每次写文章,用到都要查一下的Markdown语法 字体颜色 [Markdown笔记]设置字体颜色 字体颜色 Font colors Decrsiption Demonstration Effect 选 ...

  6. 解决win10的wifi打不开或无法搜索到周围wifi的问题

    今天笔者遇到了一个比较奇葩的问题,就是笔记本电脑的wifi打不开了,即使打开了也是搜索不到周围的wifi的.这个问题一开始笔者没有发现,因为在暑假期间都是使用笔记本连接自己的手机热点进行上网的.然而暑 ...

  7. Codeforces #475 div2

    题目链接:http://codeforces.com/contest/964 A题 答案n/2+1: B题 讨论三种情况 c>b c==b c<b C题 数论,逆元+快速幂,但是我一直卡在 ...

  8. 算法1:Fibonacci数列

    斐波那契数列(Fibonacci) 一.背景介绍 斐波那契数列(Fibonacci sequence),又称黄金分割数列,因数学家莱昂纳多·斐波那契(Leonardo Fibonacci)以兔子繁殖为 ...

  9. 【云原生 | Kubernetes 系列】— Kubernetes存储方案

    目录 [云原生 | Kubernetes 系列]- Kubernetes存储方案 一.基本存储 EmptyDir HostPath NFS 搭建nfs服务器 二.高级存储 PV和PVC pv pvc ...

  10. .NET MAUI (微软 .Net 6 跨多平台应用 UI)框架的研究学习

    针对 .NET MAUI (微软 .Net 6 跨多平台应用 UI)框架的研究学习,使用VS2022  C# 和 XAML 创建本机移动和桌面应用,开发一套代码可以发布在 Android . iOS ...