ubuntu下vue项目构建工具安装小笔记
总流程:
nvm-->-->yarn-->vue
一、安装nvm,若有之前有安装则需要先卸掉,再重新安装
1. 卸载:
1.先卸载npm
sudo npm uninstall npm -g
2.卸载node
3. 确认删除:
sudo apt-get remove nodejs
看看是否有残留
进入 /usr/local/lib 删除所有 node 和 node_modules文件夹
进入 /usr/local/include 删除所有 node 和 node_modules 文件夹
进入 /usr/local/bin 删除 node 的可执行文件
安装:(新node版本是带有npm)
2、安装
cd ~/Downloads
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
# 安装过程中,因为国外服务器的原因,所以如果失败就执行多几次吧。目前没有别的办法。
# 安装成功以后,关闭当前终端,重新打开就可以使用了。
#若自动安装失败,尝试使用git:
1、克隆到本地:git clone https://gitee.com/mirrors/nvm 本地地址
2、bash install.sh # 注意:进入nvm目录内执行
3、再执行三句语句:
export NVM_DIR="/home/morton/.nvm" #具体由本地地址决定
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
完毕!
安装完成之后自带node
注意事项:
一、node、nvm、npm、npx、nrm 区别
-
node:是一个基于Chrome V8引擎的JS运行环境。 -
npm:是node.js默认的包管理系统(用JavaScript编写的),在安装的node的时候,npm也会跟着一起安装,管理node中的第三方插件。 -
npx:npm从v5.2.0开始新增了npx命令,>=该版本会自动安装npx,附带:npx 有什么作用跟意义?为什么要有 npx?什么场景使用?。 -
nrm:是一个npm源管理工具,使用它可以快速切换npm源,默认是官方源,当npm下载包过慢时,可能需要切换到第三方源(例如:淘宝、科大...),还有公司私有源地址等等。 -
nvm:node版本管理器,也就是说:一个nvm可以管理多个node版本(包含npm与npx),可以方便快捷的安装、切换不同版本的node。
二、node、nvm、npm、npx、nrm 关系
-
nvm管理node(包含npm与npx) 的版本,npm可以管理node的第三方插件,nrm可以管理npm的源地址(当然也可以直接使用npm自带命令管理,看个人习惯)。 -
切换不同的
node版本,npm与npx的版本也会跟着变化。$ nvm use v8.16.0 Now using node v8.16.0 (npm v6.4.1) $ nvm use v14.15.4 Now using node v14.15.4 (npm v6.14.10) $ nvm use v18.6.0 Now using node v18.6.0 (npm v8.13.2)
二、安装vue:
可以使用npm 或 yarn安装vue-cli 项目构建工具
npm install -g @vue/cli # yarn global add @vue/cli # 注意,安装不成功就换成npm # 安装完成以后,可以通过以下命令查看vue/cli的版本 vue -V # 4.5.13
如果安装速度过慢,一直超时,可以考虑切换国内npm镜像源:npmmirror 镜像站
三、使用vue-cli创建项目
6.5.1 生成vue项目
使用vue-cli自动化工具可以快速搭建单页应用项目目录。
该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。安装过程:
# vue create 项目目录名 # 会自动创建一个目录用于保存项目的。 cd ~/Desktop vue create myproject
6.5.1.1 默认安装
第一个选择安装配置,此处我们选择中间的(通过键盘上下键按钮移动),回车键:
第二个,选择包管理器。默认选择了Yarn,所以我们直接回车即可。

安装过程因为需要联网,所以如果出现网络安装失败,则重新安装多次。(4-5遍)

安装成功以后,效果如下:

跟着官方提示,输入命令。

打开蓝色链接地址,访问项目,http://localhost:8080:

6.5.1.2 自定义安装
cd ~/Desktop vue create myproject2
第一,选择安装配置,最后一项就是选择自定义安装。回车。

第二,选择项目依赖文件。空格表示选择/取消选择。选择完成以后,回车。

第三,根据上面的配置,选择vue版本为3.0版本。

第四,选择路由Router的路由模式,问我们是否使用历史状态管理模型,就是路由没有#号。

第五,选择配置EsLint的配置项。

第六,ESLint格式化的时机。空格把2个都勾选上就行了。

第七,EsLint和Babel的配置是否保存一块,选择第二个选项。

第八,是否保存上面的一系列操作作为以后项目的安装配置。

后续的安装过程,和上面的选择的默认安装流程一致了。
使用vue:
cd myproject yarn serve
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)