vue保存内容到本地_怎样在Linux上开发vue项目

怎样在Linux上开发vue项目

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

(1)安装node.js

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

51e1367e49086aa08de5901af6490350.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版本

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

da04193e167de26b006aa621b1ec8028.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),如下图:

2d2f9a0032f39f3694d51b67cd8897de.png

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

5bd81c9a689f78a990d01d6f3b166e2b.png

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

7a87bd9c8f443d06a2e4651740ea04c0.png

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

063ead6519d8719fbbc0deda15c6221a.png

选择eslint的配置,如下图:

ada558b4178b3315fd5ccbca5ea649fc.png

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

c4019d4aeb20478c2bc1ad3dc90df3cb.png

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

2b2adff8cece703d1198a20ada898c22.png

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

ce35a21dc482fac9a68cf2ea9357b181.png

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

06ec7db46892118266a42eb966308248.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值