百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

手把手教你安装使用Vue CLI (2.x 3.x 4.x)

ztj100 2025-02-17 15:07 36 浏览 0 评论

安装vue脚手架之前,先安装好node环境!!!
以下安装过程中,如果重复安装一直报错,可以尝试使用下面命令清理npm缓存

npm cache verify
npm cache clean --force

安装webpack

npm i webpack-cli -g    #全局安装, linux和Mac 需要加sudo
webpack-cli -v          #安装后, 可查看版本

Vue CLI 2.x

2.1 安装

npm i vue-cli -g    #全局安装, linux和Mac 需要加sudo
vue -V             #查看版本号(大写V)

2.2 创建项目

vue init webpack 项目名字

创建项目时一些步骤选项

# 步骤1 项目名称
? Project name vue-cli-2.x
# 步骤2 项目描述
? Project description vue-cli-2.x demo
# 步骤3 项目作者
? Author lanxy
# 步骤4 Vue 构建模式
? Vue build (Use arrow keys)
? Runtime + Compiler: recommended for most users #根组件中使用 template + components
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere  #根组件中使用 render (推荐)
# 步骤5 是否安装vue-router
? Install vue-router? Yes
# 步骤6 是否添加ESLint 代码检查工具
? Use ESLint to lint your code? Yes
# 步骤7 选择ESLint 检查模式 (步骤5不选时无步骤6)
? Pick an ESLint preset (Use arrow keys)
? Standard (https://github.com/standard/standard) #标准配置
  Airbnb (https://github.com/airbnb/javascript)   #Airbnb配置
  none (configure it yourself)                    #自定义
# 步骤8 设置单元测试
? Set up unit tests No
# 步骤9 e2e测试
? Setup e2e tests with Nightwatch? No
# 步骤10 选择项目的包管理方式 npm /yarn
? Should we run `npm install` for you after the project has been created? (recommended)
? Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

2.3 启动项目

npm run dev

Vue CLI 3.x/4.x

安装Vue CLI 3.x/4.x 默认会覆盖Vue CLI 2.x的,所以安装时,如果以后不需要使用Vue CLI 2.x 那么需要把2.x版本先卸载掉, 如果还想同时使用,则可通过安装CLI的桥接工具来做兼容

npm uninstall vue-cli #卸载Vue CLI 2.x
# 或者安装桥接工具来兼容两者
npm i -g @vue/cli-init #安装桥接工具 (linue和Mac 需要加sudo)

3.1 安装Vue CLI 3.x/4.x (目前最新是4.x)

npm i -g @vue/cli #自动安装最新版本

3.2 创建项目

vue create 项目名

创建项目过程步骤选项说明:

# 步骤1 选择预设配置,还是手动配置
? Please pick a preset:
  default (babel, eslint) #默认配置
? Manually select features #选此项,进行手动配置
# 步骤2 选择添加的配置项(上下键可移动, 空格键选择或者取消选择)下面实心原点表示选中项
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ? Babel
 ? TypeScript
 ? Progressive Web App (PWA) Support  #渐进式Web应用程序
 ? Router                             #vue-router(vue路由)
 ? Vuex                               #vuex(vue的状态管理模式)
 ? CSS Pre-processors                 #CSS 预处理器(如:less、sass)
?? Linter / Formatter                 #代码风格检查和格式化(如:ESlint)
 ? Unit Testing                       #单元测试(unit tests)
 ? E2E Testing                        #e2e(end to end) 测试
 
 # 步骤3  选择是否使用history router:Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) #选n

# 步骤4 选中css预处理器
? 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  #vue 一般搭配此项
  Stylus
  
# 步骤5 选择ESLint 的代码检测模式 (步骤2如果没有选Linter / Formatter项,则无步骤5和6)
? Pick a linter / formatter config:
  ESLint with error prevention only  #只有错误预防
  ESLint + Airbnb config             #Aribnb配置
? ESLint + Standard config           #标准配置
  ESLint + Prettier                  #漂亮配置
  
# 步骤6 ESLint 的检查时机
? Pick additional lint features:
 ? Lint on save             #保存时检查
?? Lint and fix on commit   #commit时检查

# 步骤7 选择如何存放配置
? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files  #独立的文件放置
? In package.json            #放到package.json中

# 步骤8 是否保存本次配置(保存之后在下次创建项目时即可选择预设置项)
? Save this as a preset for future projects? (y/N)
# 如果选择了yes 最后会提示输入保存的名称,输入回车即可

3.3 启动项目

npm run serve

VUE 项目管理器

在使用Vue CLI 3.x以上时,可以通过命令 `vue ui` 进行启动Vue项目管理器。这样就可以通过项目管理器进行管理项目(例如创建、运行、打包等等操作)

相关推荐

其实TensorFlow真的很水无非就这30篇熬夜练

好的!以下是TensorFlow需要掌握的核心内容,用列表形式呈现,简洁清晰(含表情符号,<300字):1.基础概念与环境TensorFlow架构(计算图、会话->EagerE...

交叉验证和超参数调整:如何优化你的机器学习模型

准确预测Fitbit的睡眠得分在本文的前两部分中,我获取了Fitbit的睡眠数据并对其进行预处理,将这些数据分为训练集、验证集和测试集,除此之外,我还训练了三种不同的机器学习模型并比较了它们的性能。在...

机器学习交叉验证全指南:原理、类型与实战技巧

机器学习模型常常需要大量数据,但它们如何与实时新数据协同工作也同样关键。交叉验证是一种通过将数据集分成若干部分、在部分数据上训练模型、在其余数据上测试模型的方法,用来检验模型的表现。这有助于发现过拟合...

深度学习中的类别激活热图可视化

作者:ValentinaAlto编译:ronghuaiyang导读使用Keras实现图像分类中的激活热图的可视化,帮助更有针对性...

超强,必会的机器学习评估指标

大侠幸会,在下全网同名[算法金]0基础转AI上岸,多个算法赛Top[日更万日,让更多人享受智能乐趣]构建机器学习模型的关键步骤是检查其性能,这是通过使用验证指标来完成的。选择正确的验证指...

机器学习入门教程-第六课:监督学习与非监督学习

1.回顾与引入上节课我们谈到了机器学习的一些实战技巧,比如如何处理数据、选择模型以及调整参数。今天,我们将更深入地探讨机器学习的两大类:监督学习和非监督学习。2.监督学习监督学习就像是有老师的教学...

Python教程(三十八):机器学习基础

...

Python 模型部署不用愁!容器化实战,5 分钟搞定环境配置

你是不是也遇到过这种糟心事:花了好几天训练出的Python模型,在自己电脑上跑得顺顺当当,一放到服务器就各种报错。要么是Python版本不对,要么是依赖库冲突,折腾半天还是用不了。别再喊“我...

超全面讲透一个算法模型,高斯核!!

...

神经网络与传统统计方法的简单对比

传统的统计方法如...

AI 基础知识从0.1到0.2——用“房价预测”入门机器学习全流程

...

自回归滞后模型进行多变量时间序列预测

下图显示了关于不同类型葡萄酒销量的月度多元时间序列。每种葡萄酒类型都是时间序列中的一个变量。假设要预测其中一个变量。比如,sparklingwine。如何建立一个模型来进行预测呢?一种常见的方...

苹果AI策略:慢哲学——科技行业的“长期主义”试金石

苹果AI策略的深度原创分析,结合技术伦理、商业逻辑与行业博弈,揭示其“慢哲学”背后的战略智慧:一、反常之举:AI狂潮中的“逆行者”当科技巨头深陷AI军备竞赛,苹果的克制显得格格不入:功能延期:App...

时间序列预测全攻略,6大模型代码实操

如果你对数据分析感兴趣,希望学习更多的方法论,希望听听经验分享,欢迎移步宝藏公众号...

AI 基础知识从 0.4 到 0.5—— 计算机视觉之光 CNN

...

取消回复欢迎 发表评论: