[Vue] 1.Vue安装+Vscode绑定 +新建页面

本文详细介绍如何从零开始搭建并运行Vue项目,包括安装Node.js、Vue及Vue-cli,创建项目,安装依赖,以及使用Vscode进行项目管理和运行。同时,介绍了如何将Vue项目导出为普通HTML、CSS、JS项目包,以及推荐的UI框架Element UI。

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

1.准备工作

    首先安装node.js  npm,cnpm(百度一堆教程),

    检验是否安装成功:输入npm -v

    安装Vue: npm install vue

    安装Vue-cli: npm install -g @vue/cli

    新建项目:先手动新建文件夹X,命令行进入到X里面(cd命令)

    vue -v查看版本

    (Vue-cli如果是3.0以下) 

    新建项目:vue init webpack 项目名

    安装依赖:npm install

    运行项目:npm run dev  此时会有个链接,打开就是运行结果了

    终止项目:ctrl+c

    绑定Vscode:左上角文件-打开文件夹,打开X,如下图,初学关注红色的地方就ok了

      

    (Vue-cli如果是3.0以上)

    新建项目:vue create 项目名

    运行项目:vue run serve

 

    Vscode里安装Vetur等插件,使得有高亮

    Vscode运行Vue项目:Vscode里终端-新建终端-输入npm run dev即可

    注意:Vue项目可以导出成普通的html css js项目包,从而给后端使用

    ui框架的选择:element-ui  

    https://element.eleme.cn/#/zh-CN/component/installation 

 

2.看看.vue文件(Vue版本:2.9.6)

Vue项目实际上就是编写.vue组件

现在我们来新建一个页面,He

1.在router文件夹的index.js里加上红框代码

2.在components文件夹里新建He.vue,

注意<template>里必须要先写一个div标签包着

ok

 

### 创建一个新的 Vue3 和 Vite 项目的指南 要在 Visual Studio Code (VSCode) 中创建一个基于 Vue3 和 Vite 的新项目,以下是详细的说明: #### 安装必要的工具 确保已安装 Node.js 和 npm 或 yarn。可以通过运行以下命令来验证版本: ```bash node -v && npm -v || yarn -v ``` 如果尚未安装,请先下载并安装最新稳定版的 Node.js[^4]。 #### 初始化新的 Vite 项目 使用终端或 VSCode 集成终端执行以下命令以初始化一个新的 Vite 项目: ```bash npm create vite@latest my-vue-app --template vue ``` 或者如果你更喜欢使用 Yarn,则可以运行: ```bash yarn create vite my-vue-app --template vue ``` 这会创建一个名为 `my-vue-app` 的目录,并设置好基本的 Vue3 和 Vite 结构[^5]。 #### 进入项目文件夹 切换到刚刚创建的项目文件夹中: ```bash cd my-vue-app ``` #### 安装依赖项 在进入项目根目录之后,安装所需的依赖库: ```bash npm install ``` 或者对于 Yarn 用户来说: ```bash yarn install ``` #### 启动开发服务器 完成上述操作后,启动本地开发服务器以便查看应用效果: ```bash npm run dev ``` Yarn 命令则为: ```bash yarn dev ``` 此时应该可以在默认端口(通常是 http://localhost:3000)上看到初始页面[^6]。 #### 使用 VSCode 打开项目 打开 VSCode 并加载该项目作为工作区的一部分: ```bash code . ``` 此命令会在当前路径下自动开启 VSCode 编辑器窗口[^7]。 #### 构建与预览生产环境代码 当准备部署应用程序时,可按照如下方式构建最终产物以及对其进行预览测试: - **Build**: ```bash npm run build ``` 或者 ```bash yarn build ``` - **Preview Build Output**: ```bash npm run preview ``` 或者 ```bash yarn preview ``` 这样就能通过指定 URL 地址审查编译后的静态资源成果[^8]。 --- ### 注意事项 尽管 React 被描述为具有简单的核心概念从而允许开发者专注于更高层次的设计模式而非单纯记忆 API 细节[^3],Vue 类似地提供了直观易懂的数据绑定机制和组件化架构支持快速迭代复杂界面需求;因此熟悉其基础语法即可高效开展前端工程实践。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值