vue下载

第一步:

安装 node.js (如果已安装就不用装了,当然如果你想安装最新版本的node.js最好是从新安装一遍)

node.js安装官网地址 https://nodejs.org/zh-cn/

安装完成之后 win+r 键 打开运行 输入cmd 打开命令行窗口

输入 node -v 命令 打印出版本号

在输入 npm -v 命令 打印出版本号

可以输出版本号就安装成功了

切换npm安装源地址,输入命令

npm config set registry https://registry.npm.taobao.org          

配置后可通过下面方式来验证是否成功 打印出 https://registry.npm.taobao.org代表成功

npm config get registry  

第二步:

在命令行窗口输入命令,全局安装vue脚手架

npm i -g @vue/cli  

安装完成之后输入命令,(注意V是大写)打印出vuecli的版本号 代表成功

vue  -V

第三步:

1.使用vscode打开你的代码项目文件夹 ,左下角打开控制台选择终端 ,注意右上角的需要使用 command prompt 命令行

 2.输入命令,创建一个以项目文件夹,名字自己起

vue create demo 

3.创建完成之后

需要进入刚才创建的项目文件夹: 执行命令

cd demo

可以添加自己需要的插件 以vue-router为例子:

添加 vue-router 插件 执行命令:

vue add router

如果需要其他插件查看官方文档的安装说明 自己运行命令即可

如下载vue3 Element UI

npm install element-plus --save

第四步:

插件安装完成之后 就可以运行项目了 使用命令:

npm run serve

 打开 http://localhost:8080/ (按住ctrl,鼠标左击)

项目目录解析

### 如何下载和安装 Vue.js下载并安装 Vue.js 框架,需遵循以下方法: #### 方法一:通过 CDN 使用 Vue.js 如果仅希望快速尝试 Vue.js 而无需安装环境,则可以通过引入公共 CDN 来加载 Vue.js 库。以下是 HTML 文件中的代码示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue via CDN</title> <!-- 引入 Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app">{{ message }}</div> <script type="text/javascript"> const { createApp } = Vue; const app = createApp({ data() { return { message: 'Hello Vue!' }; } }); app.mount('#app'); </script> </body> </html> ``` 此方式适合于简单的项目或学习用途。 --- #### 方法二:通过 npm 安装 Vue.js 对于更复杂的项目,推荐使用 npm 进行管理。这需要先确认本地环境中已经安装了 Node.jsnpm 工具,并满足最低版本要求[^1]。 ##### 步骤说明 1. **验证 Node.js 版本** 执行以下命令以确保 Node.js 的版本不低于 18.0: ```bash node -v ``` 2. **初始化项目** 创建一个新的文件夹作为项目的根目录,并运行 `npm init` 命令生成 `package.json` 配置文件: ```bash mkdir vue-project && cd vue-project npm init -y ``` 3. **安装 Vue.js** 可以全局安装 Vue CLI 或者直接在项目中安装 Vue.js 依赖包。 - 如果选择 Vue CLI 方式(适用于 Vue 2),可以执行如下命令: ```bash npm install -g @vue/cli vue create my-vue-app ``` - 对于 Vue 3 推荐的方式是基于 Vite 构建工具进行设置[^3]: ```bash npm install -D vite npx vite --template vue ./my-vue-app ``` 完成上述操作后即可启动开发服务器测试应用功能。 --- #### 关键概念补充 除了基本的安装流程外,了解 Vue.js 的核心特点也有助于更好地利用该框架构建现代 Web UI[^2]。例如其组件化的架构设计允许我们将页面拆分为独立可重用的小模块;而虚拟 DOM 技术则提高了渲染性能。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值