vue如何在末尾添加_怎样在Linux上开发vue项目

一、开发环境搭建:安装node.js环境以及vue cli工具

(1)安装node.js

从官网下载对应的二进制压缩包,如下图:

8febdc7eeba26eee83acc94a36f7b477.png

01.png

解压到程序安装目录

xz -d node-v12.17.0-linux-x64.tar.xz
tar -xvf node-v12.17.0-linux-x64.tar
sudo mv node-v12.17.0-linux-x64 /usr/local/nodejs

编辑配置文件

vim /etc/profile

将node.js的node可执行可执行文件与npm链接所在目录添加到环境变量,在文件/etc/profile文件末尾添加以下内容

export PATH=/usr/local/nodejs/bin:$PATH

保存文件并执行以下命令

source /etc/profile
node -v # 查看本地node版本
npm -v # 查看本地npm版本

若显示以下类似,则代表安装成功

c15da25066d8149387cea50f6d5dbca7.png

02.png

(2)安装nvm(node版本管理工具)

nvm是node版本管理工具,使用nvm我们可以随时在切换我们本地的node版本。
nvm项目地址为https://github.com/nvm-sh/nvm
根据文档提示,我们只需执行一下命令即可完成安装:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

npm相关指令以及示例:

nvm -help #查看nvm帮助文档
nvm --version #查看nvm版本号
nvm ls-remote #列出所有可以安装的node版本
nvm install v10.14.2 #指定安装10.14.2版本的node.js
nvm install node #安装最新的node版本(node为最新版本号的别名)
nvm install --lts node #安装最新的node长期维护版本
nvm ls #列出本地安装的node版本
nvm use v12.16.2 #将本地node切换为12.16.2版本

(3)安装yarn(node包管理工具)

yarn的中文官网https://yarn.bootcss.com/
根据官方文档,以Debian/Ubuntu为例,安装步骤如下:
首先配置软件仓库:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

安装yarn包

sudo apt update && sudo apt install yarn

安装完成之后,使用如下命令检测是否安装成功:

yarn -v

如果出现相应的版本号,则代表安装成功

(4)安装vue cli

vue cli官网链接:https://cli.vuejs.org/
使用npm全局安装

npm install -g @vue/cli

或者使用yarn 全局安装

yarn global add @vue/cli

二、使用命令行创建vue项目

在创建项目之前,我们可以使用如下命令查看相关的指令帮助文档

vue vue -h

进入工作目录,创建名为test的vue项目

vue create test

将光标选择到手动选择特性(Manually select features),如下图:

44b960f786d2cf01752cc7e4424bcc41.png

03.png

手动移动光标,选择响应的特性,使用空格键勾选或者取消勾选,如下图所示:

b466bd99c6056b386d525fd6415b8583.png

04.png

选择router的history模式,如下图:

e694fd5f70a2c07b0102ef7917aab4ea.png

05.png

选择node-sass模式,如下图:

5951c889a40e00a7dee0c59ee737a9c2.png

06.png

选择eslint的配置,如下图:

e60f0fa5a562d151b8ea1cfdb4b4fd21.png

07.png

选择eslint保存时检查代码,如下图:

2e6b45e7e68beb91be838c76b9e2f1bc.png

08.png

选择将配置文件保存在单独的配置文件中,如下图:

d929d1a5bca92c94c1f8215c72051dff.png

09.png

选择时候将设置作为预设,如果输入y,则是,N则否,如下图:

35eb68657b972fc1c638210e2fc5115b.png

10.png

如果选择是,按回车后还需输入预设名,再按回车等待安装即可。如果出现如下如所示则代表创建爱你成功,否则你需要检查一下网络和你的环境,重新创建。

ff9aea35a080913dca5ad86a0a5abee1.png

11.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/513518.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机专业考哪些证书含金量高?

计算机专业要不要考证?考证很重要吗?考哪个好?对于有些人而言,他们可能会有人认为认证就是一张纸,没有太大的用处,看到大家都在考,心里又会产生动摇;还有人会认为考证的价格太高&…

java 判断日期连续_如何在Java中检查日期是否大于另一个日期?[重复]

小编典典从这里拍摄:import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Date;public class DateDiff {public static void main( String[] args ){compareDates("2017-01-13 00:00:00", "2017-01-14 00:00:00&qu…

【深度】阿里巴巴万级规模 K8s 集群全局高可用体系之美

简介: 台湾作家林清玄在接受记者采访的时候,如此评价自己 30 多年写作生涯:“第一个十年我才华横溢,‘贼光闪现’,令周边黯然失色;第二个十年,我终于‘宝光现形’,不再去抢风头&…

云原生时代,开发者如何构筑容器安全?

随着数字化转型进入“深水区”,云原生改变传统的开发模式,加快程序应用的开发、交付、运维效率,充分释放云价值。容器作为云原生的代表技术,正成为资源调度和编排的标准,有效帮助企业降低 IT 实施和运维成本。 据 CNC…

python依赖注入_如何做依赖注入python方式?

这一切都取决于情况.例如,如果您使用依赖注入来进行测试,所以您可以轻松地嘲笑某些内容 – 您可以经常放弃注入:您可以嘲笑您将注入的模块或类:subprocess.Popen some_mock_Popenresult subprocess.call(...)assert some_mock_popen.result resultsub…

java外部接口图解_java代码实现访问网络外部接口并获取数据的工具类详解

java代码实现访问网络外部接口并获取数据的工具类工具类代码,可以直接copy使用package com.yqzj.util;import org.apache.log4j.LogManager;import org.apache.log4j.Logger;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.i…

「技术人生」第2篇:学会分析事物的本质

简介: 对于研发同学而言,探究事物的本质,是最基础最核心最先需要被掌握的技能,没有之一。 作者:贺科学 技术一号位不是岗位,更多的是技术人员在公司中做事的一种心态,这个系列的文章适合所有想…

低代码能做什么?这家服务商用钉钉宜搭打造了智慧医院管理应用

简介: 谷瞰在医疗信息化领域积累的专业解决方案,如果能加持宜搭轻量级、高度灵活、极高效的开发支撑能力,可能是找到智慧医院快速落地的最优解。 “疫情作为催化剂,加速了医疗信息化的发展”,浙江谷瞰信息有限公司董事…

python socket能做什么_[python]初探socket

1.什么是socket?Socket中文译作:套接字,但是大家一般约定俗称的都用:socket。我想在解释socket是什么之前,先说它是用来干嘛的:socket是来建立‘通信’的基础,建立连接,传输数据——…

mysql sysdate本周_oracle 、mysql 取昨天 前天 本周 数据

查询今天数据:SELECT COUNT(1) FROM T_CALL_RECORDS WHERE TO_CHAR(T_RKSJ,‘YYYY-MM-DD‘)TO_CHAR(SYSDATE,‘YYYY-MM-DD‘)查询昨天数据:SELECT COUNT(1) FROM T_CALL_RECORDS WHERE TO_CHAR(T_RKSJ,‘YYYY-MM-DD‘)TO_CHAR(SYSDATE-1,‘YYYY-MM-DD‘)…

Fortinet:行走在网络和安全融合领域的最前列

近日,Fortinet 核心操作系统的演进暨 Fortinet SD-WAN 在2021年度Gartner 广域网边缘基础设施魔力象限的位置及其关键能力与场景宣讲成功举办。会议指出,在数字化转型过程中,攻击平面成倍增长、边缘无处不在,没有“安全”的“网络…

如何通过Graph+AI的方法打造高精度风控模型

简介: 阿里云图智能平台在金融行业已经帮助银行、保险等领域客户构建了金融风控、商品推荐、循环担保检测、异常指标监控、违规团伙挖掘等场景,通过穿透行业应用场景,帮助客户基于多维数据做出精准决策。 >>发布会传送门:h…

python虚拟环境安装的包在哪_如何使用virtualenv引导脚本在虚拟环境中安装python包?...

我想创建一个引导脚本来设置本地环境并在其中安装所有要求.我一直在尝试使用virtualenv.create_bootstrap_script,如docs所述.import virtualenvs virtualenv.create_bootstrap_script(import subprocessdef after_install(options, home_dir):subprocess.call([pip, install,…

实操指南 | Resource Queue如何实现对AnalyticDB PostgreSQL的资源管理?

简介: 作者:阿里云数据库OLAP产品部 - 子华 一 背景 AnalyticDB PostgreSQL版(简称ADB PG)是阿里云数据库团队基于PostgreSQL内核(简称PG)打造的一款云原生数据仓库产品。在数据实时交互式分析、HTAP、ETL…

python均分纸牌_Python实现比较扑克牌大小程序代码示例

是Udacity课程的第一个项目。先从宏观把握一下思路,目的是做一个比较德州扑克大小的问题首先,先抽象出一个处理的函数,它根据返回值的大小给出结果。之后我们在定义如何比较两个或者多个手牌的大小,为方便比较大小,我们…

底层基础软件崛起,达梦数据库的选择与收获

作者 | 宋慧 出品 | CSDN 作为基础软件三驾马车之一,数据库一直是 IT 系统的核心。中国 IT 应用发展迅速,创新的应用场景为操作系统、数据库这样的底层基础软件提供了新的发展机会。基础数据成为“十四五”的重点关注方向,中国数据库正在快…

Apache Flink在 bilibili 的多元化探索与实践

简介: bilibili 万亿级传输分发架构的落地,以及 AI 领域如何基于 Flink 打造一套完善的预处理实时 Pipeline。 本文由 bilibili 大数据实时平台负责人郑志升分享,本次分享核心讲解万亿级传输分发架构的落地,以及 AI 领域如何基于 …

【开通指南】 实时计算 Flink 全托管版本

简介: 【开通指南】实时计算 Flink 全托管版本 1、试用的实时计算 Flink 版产品是后付费还是预付费?是否有额外费用产生? 预付费,有额外的SLB费用,一天2元封顶。(开通 Flink 全托管产品,需使用…

tomcat启动成功 未加载项目_喜讯!济宁医学院附属医院SPD项目成功启动

济宁医学院附属医院(简称济医附院)始建于1951年,医院拥有79个临床科室,9个重症监护病区,开放床位3028张,是山东省首家通过JCI认证的大型综合医院,作为山东省区域医疗中心,早在2016年,医院就通过…

java like a_如何在Java中实现类似“ LIKE”运算符的SQL?

我需要Java中的比较器,该比较器的语义与sql"赞"运算符相同。例如:myComparator.like("digital","%ital%");myComparator.like("digital","%gi?a%");myComparator.like("digital","di…