ubuntu安装vue环境

本文介绍如何通过命令行在Linux环境下安装Node.js、npm及Vue.js开发环境,并配置国内镜像加速,最后演示创建并运行一个Vue.js项目。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

sudo apt update
sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm
sudo npm config set registry http://registry.npm.taobao.org 设置国内资源镜像
sudo npm install npm -g
sudo npm install -g cnpm --registry=http://registry.npm.taobao.org
sudo cnpm install vue -g
sudo cnpm install @vue/cli -g
sudo cnpm install webpack -g

新建项目

vue create vuedemo
cd vuedemo
cnpm run serve

### 在 Ubuntu安装 Vue.js #### 1. 安装 Node.js 和 npm Vue.js 是基于 JavaScript 构建的框架,因此需要先安装 Node.js 和 npm(Node Package Manager)。以下是具体步骤: 更新系统的包索引: ```bash sudo apt update ``` 使用以下命令安装 NodeSource 存储库并设置 Node.js 版本为 16.x[^1]: ```bash curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - ``` 接着安装 Node.js: ```bash sudo apt-get install -y nodejs ``` 验证安装是否成功: ```bash node -v && npm -v ``` 这一步会返回已安装的 Node.js 和 npm 的版本号[^1]。 #### 2. 全局安装 Vue CLI Vue CLI 是官方提供的脚手架工具,用于快速搭建现代 Web 开发环境。通过 npm 全局安装 Vue CLI: ```bash npm install -g @vue/cli ``` 确认 Vue CLI 是否安装成功: ```bash vue --version ``` 如果能正常输出版本号,则说明安装成功[^5]。 #### 3. 创建 Vue 项目 初始化一个新的 Vue 项目,假设项目名称为 `my-vue-app`: ```bash vue create my-vue-app ``` 在交互式界面中可以选择预设配置或手动选择特性。如果不熟悉这些选项,可以直接按回车键接受默认配置[^5]。 进入项目目录并安装依赖项: ```bash cd my-vue-app npm install ``` 启动开发服务器: ```bash npm run serve ``` 打开浏览器访问 `http://localhost:8080` 即可查看运行效果。 #### 4. 推荐的项目结构 为了保持项目的清晰性和可维护性,建议按照以下结构组织代码[^3]: ``` my-vue-project/ ├── public/ # 静态资源目录 │ ├── index.html │ └── favicon.ico ├── src/ # 源代码目录 │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件 │ ├── router/ # 路由配置 │ ├── store/ # 状态管理 │ ├── views/ # 页面视图 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── .env # 环境变量配置 ├── .gitignore # Git忽略文件 ├── babel.config.js # Babel配置 ├── package.json # 项目依赖配置 └── vue.config.js # Vue CLI配置 ``` #### 5. 安装和调试工具 为了更方便地调试 Vue 应用程序,可以安装 **Vue DevTools** 插件。推荐直接从 Chrome 商店或其他可信来源下载 `.crx` 文件,并将其拖放到浏览器扩展页面中完成安装[^2]。 如果遇到 “Vue.js not detected” 提示,请确保以下几点: - 当前页面确实是一个 Vue 应用; - 已正确引入 Vue 库; - 浏览器缓存可能干扰检测结果,尝试清除后再试[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值