VUE 项目开始创建和运行

最新推荐文章于 2024-05-13 08:35:21 发布
原创 最新推荐文章于 2024-05-13 08:35:21 发布 · 249 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #npm #javascript #webpack

首先，在CMD命令行确认：node.js、npm、webpack均已经成功安装。

其次，开始安装部署VUE项目必须文件：

应用 vue 提供的网站模板：

建入命令： vue-init webpack project-name

等待自动创建完美的网站目录模板， 成功创建后， 你会看到这个命令窗口，特别的亲切呢！

在浏览器窗口输入地址：http://localhost:8080，就会看到如下的页面。“Yes" 

 【over】

VUE实现Studio管理后台（四）：状态模式实现窗口停靠，灵动、自由
悠闲的水的博客
03-05 421
昨天做的tabs窗口，非常满意，今天乘胜追击，把它做成了可以根据自身大小改变显示样式，自身宽度过小时，tab页可以浮动停靠其一侧。具体效果： 左侧 右侧 向来喜欢简单明了的东西，所以想实现的简单一点，无奈现实不允许啊，功能实在有一丢丢复杂。硬着头皮搞了整整一下午，终于完成。 左侧跟右侧窗口，要使用同一个控件，尽量增加代码的可复用性，控件的状态就有些多：正常显示（普通tabs窗口），列表（显示图...
我的第一个前端项目，vue项目从零开始创建和运行
麦小洛
01-06 4904
​入门前端，从基础做起，从零开始新建项目。VUE脚手架项目是一个“单页面”应用，即整个项目中只有1个网页！
使用Visual Studio Code编写VUE所使用的插件
ww0908的博客
10-24 9245
Auto Close Tag 自动闭合HTML标签   Auto Rename Tag 修改HTML标签时，自动修改匹配的标签   Bookmarks添加行书签   Can I Use HTML5、CSS3、SVG的浏览器兼容性检查   Code Runner 运行选中代码段（支持大量语言，包括Node）   CodeBing 在VSCode中弹出浏览器并搜索，可编辑搜索引擎 ...
开源项目Studio-Vue—校园工作室管理系统(含前后台，SpringBoot+Vue)
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
06-15 1828
去年在工作室偶然听到其他工作室要做一个官网，接着趁着一时兴起然后也找了个模板来做了一个自己的官网以及一个后台管理系统，当时的后台系统只有一个登录、注册还有一个提交个人信息的页面，主要为了方便展示动态汇总团队成员。今年也正好趁毕业设计这个为主题继续进行了开发，耗时近一个月将后台管理系统进行了初步完善。该工作室系统主要面向校园工作室，可供个人及工作室团队学习使用。目前该项目包含前后台。所有博客文件目录索引：博客目录索引(持续更新)Studio-Vue（Gitee）：https://gitee.com/chang
vue 项目通过android studio 离线打包
ocean___的博客
08-26 3910
vue 项目通过android studio 离线打包1 vue项目执行 npm run build 打包生成dist文件
Vue的学习 —— ＜vue的开发环境＞ “6000字超详细”
2301_78038072的博客
05-13 1965
在开始编写Vue应用程序之前，搭建一个合适的开发环境至关重要。本章节将详细指导如何设置和配置Vue的开发环境，确保有一个稳定、高效的工作空间。从安装Node.js开始，因为Vue.js项目需要Node.js来执行构建和打包过程。然后，我们会介绍如何使用Vue CLI（命令行界面）以及Vite创建新的Vue项目，包括一些常见的选项和配置。在创建项目之后，继续探索如何安装和管理项目依赖，以及如何设置开发服务器以便实时预览应用程序。
vue 创建vue项目
vbloveshllm的专栏
03-13 702
如果端口让占用的话，修改可以自己改一下端口号，打开config文件夹的index.js文件。后台：ASP.NET Web API (编码工具：Visual Studio 2019）1、按照必须的环境，包括安装好npm，webpack和vue-cli.前台：VUE （编码工具：Visual Studio Code）2、用vue-cli创建VUE前端项目。回车运行，根据后续的提示信息进行确认，基本框架：Element UI。这个红色标识为创建的项目名称。打开当前网址即可显示。
精选资源
vue项目的启动、idea启动vue项目、idea运行vue项目、以及vue项目页面跳转逻辑、跳转vue项目页面逻辑.doc
08-29
- 如果是从零开始创建一个Vue项目，可以通过`vue create`命令创建。 - 如果已有项目，可以直接打开。本例中提到的是打开位于 `D:\Users\Administrator\Workspaces\bbsb_vue` 的项目。 3. **配置IDEA**： - **...
IDEA下从零开始的vue项目的创建及运行
初心不改
02-26 1万+
一.相关知识及准备 概念： vue：是一套框架，用于构建用户界面的渐进式框架。 vue-cli： 而vue-cli 是一个基于 Vue.js进行快速开发的完整系统。 区别： vue是一整套框架，而vue-cli只是它其中的一个脚手架 node.js:搭建Vue的环境工具,（javascript运行时），以及使用里面的npm命令安装vue项目所需的依赖包。 联系： vue-cli 是vue的命令行工具 vue-cli是一个完整的vue项目核心构成 话不多说，先安装node.js环境。 此处应有链接…!
第三节Vue项目-创建项目并运行
09-23
第三节Vue项目-创建项目并运行
详解Vue用cmd创建项目
10-17
使用命令行工具（CMD）创建Vue项目是开发流程中的第一步，这使得开发者能够快速搭建开发环境并开始编码。下面我们将详细讲解如何在CMD中创建Vue项目。 1. **环境准备**： 在开始之前，确保你已经安装了Node.js，...
Vue.js 在Visual Studio Code中启动
ai_bi的博客
03-01 3623
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。 从Vi...
VUE 实现 Studio 管理后台（三）：支持多语言国际化（vue-I18N）
悠闲的水的博客
03-05 550
RXEditor的第一版本是英文版，有些朋友看起来觉得不习惯，后来因为惰性，不愿意再修改旧代码加入中文版，这次提前就把这个问题解决了，克服惰性最好的方式，就是想到就尽快去做，避免拖延。 本来计划在界面的右上角，做一个下拉菜单选择语言。下拉菜单的工作量稍稍有些大，并且很少有随时切换界面语言的需求。最终确定获取浏览器语言环境，并使用浏览器的语言设置。也就是说，用中文浏览器打开就是中文版，用英文浏览器打...
手把手带做Vue项目By Visual Studio 2019
Jone's Area
08-15 2万+
前言（扯皮）： 最近公司前端项目要重构，之前是纯Jquery+Bootstrap做的，虽然灵活易用而且要啥有啥，一顿jq插件什么都能实现，但是后期维护一下，妈呀，这哪个**写的**代码（自个儿想那是多刺激），反正最终项目是完成了，谁也不愿意去维护了，所以果断转战Vue, 用Vue很舒服的啊，结构目录清晰，js,css,html划分非常明确，附图 老项目:页面构建代码冗余，不断copy造轮子...
在Visual Studio代码中使用Vue
qq_35149546的博客
08-09 2168
1.在Visual Studio代码中使用Vue
Vue项目搭建 -- visual Studio加vue-cli
a_靖的博客
08-12 1万+
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目， GitHub地址：https://github.com/vuejs/vue-cli 一：安装node.js 安装教程：http://www.runoob.com/nodejs/node...
Visual Studio 2019配置vue项目的图文教程详解(最新)
weixin_45438314的博客
02-25 5820
问题点：在csdn找了好多配置教程，都没成功，运行显示 解决： 步骤： 一，环境安装 1：Vue项目一切基于Node.js，必须先安装NodeJS。 下载地址：https://nodejs.org/zh-cn/ 安装nodejs,一路next就行了 win+r 输入cmd 查看node.js是否安装成功 输入 node -v 和 npm -v 得到版本信息证明安装成功。 2：确认Visual Studio 2019环境：看扩展工具里有没有勾选Node.Js 3.创建项目 右击选择 运
如何运行vue项目(超详细图解）
热门推荐
小熊的博客
02-06 9万+
📖本篇超级详细案例截图教学 如何运行别人的vue项目，图片点击可放大仔细看。 输入node -v查看nodejs版本 node -v 输入npm -v查看npm版本
vue安装并创建运行第一个vue项目（一）
大海无量的博客
07-05 5737
参照：https://www.jianshu.com/p/2769efeaa10a https://blog.csdn.net/c_royi/article/details/78847609 vue安装： 1.nodejs安装 下载地址：https://nodejs.org/en/download/ 选择对应版本的下载。然后傻瓜式一步安装到底。比如我的安装后目录为 E:\Program F...
vue create 项目名 创建后怎么运行
最新发布
09-15
<think> 我们正在讨论的是使用`vue create 项目名`创建Vue项目后的运行方法。 根据引用[2]，我们知道`vue create`是Vue CLI提供的创建项目命令，它创建的项目是基于Webpack的（对于Vue 2项目）或者Vite（Vue 3项目可以选择，但Vue CLI默认使用Webpack）。不过，从Vue 3开始，官方推荐使用`create-vue`（通过`npm init vue@latest`）来创建基于Vite的项目。但用户明确提到使用`vue create`创建项目，因此我们按照Vue CLI创建的项目来回答。 使用`vue create`创建项目后，项目的运行方法如下： 1. 进入项目目录：创建项目后，首先需要进入项目文件夹。 ```bash cd 项目名 ``` 2. 安装依赖（如果还没有安装）：在创建项目的过程中，Vue CLI会询问是否立即安装依赖（Use NPM or Yarn to install dependencies?）。如果当时选择了“是”，则依赖已经安装好；如果选择了“否”，则需要手动安装。 ```bash npm install ``` 或者（如果使用yarn） ```bash yarn install ``` 3. 运行项目：Vue CLI创建的项目通常会在`package.json`中预设几个脚本命令，其中运行开发服务器的命令是： ```bash npm run serve ``` 或者（如果使用yarn） ```bash yarn serve ``` 执行该命令后，会启动开发服务器，并输出应用程序的访问地址（通常是`http://localhost:8080`，具体端口可能因配置或端口占用而不同）。 4. 在浏览器中访问：打开浏览器，输入控制台输出的地址（如`http://localhost:8080`）即可查看运行的项目。 注意：如果在运行过程中遇到端口冲突，可以通过修改`vue.config.js`文件（如果没有，则在项目根目录创建）来更改端口。例如，将端口改为9000： ```js module.exports = { devServer: { port: 9000 } } ``` 另外，引用[3]中提到，有时设置npm镜像可能会导致问题，如果遇到安装依赖失败，可以检查并恢复npm镜像设置。 总结步骤： 1. `cd 项目名` 2. `npm install`（如果依赖未安装） 3. `npm run serve` 4. 打开浏览器访问控制台输出的地址 引用[1]虽然介绍了使用`create-vue`创建项目（基于Vite），但运行命令不同（`npm run dev`），所以这里不采用。 因此，对于使用`vue create`创建的项目，运行命令是`npm run serve`或`yarn serve`。 引用说明： [^1]: 引用自站内文档：使用create-vue创建Vue3项目的方法。 [^2]: 引用自站内文档：关于使用vue create创建项目的说明。 [^3]: 引用自站内文档：使用vue create时遇到的问题及解决方法。 下面生成相关问题： </think> ### 使用 `vue create` 创建项目后的运行方法 根据您提供的信息，使用 `vue create 项目名` 创建 Vue 项目后，运行步骤如下： #### ✅ 1. **进入项目目录** ```bash cd 项目名 # 切换到项目根目录 ``` #### ✅ 2. **安装依赖** ```bash npm install # 安装 package.json 中的依赖包 ``` > 💡 如果遇到安装错误（如引用[3]中的镜像问题），可检查并重置 npm 源： > ```bash > npm config set registry http://registry.npmjs.org [^3] > ``` #### ✅ 3. **启动开发服务器** ```bash npm run serve # 启动开发模式 ``` 执行后终端将输出访问地址（通常是 `http://localhost:8080`），浏览器打开即可查看项目。 #### ✅ 4. **生产环境构建** ```bash npm run build # 编译生产环境代码 ``` 编译后的文件会生成在 `/dist` 目录，可直接部署到服务器。 --- ### 📁 项目结构说明（关键文件） ```markdown 项目名/ ├── node_modules/ # 依赖库 ├── public/ # 静态资源 ├── src/ # 源码目录 │ ├── main.js # 应用入口文件 │ └── App.vue # 根组件 ├── package.json # 项目配置和脚本命令 └── vue.config.js # 自定义配置（如修改端口号）[^1] ``` #### 修改端口号示例（在 `vue.config.js` 中添加）： ```js module.exports = { devServer: { port: 3000 // 将默认端口改为3000 } } ``` --- ### ️ 注意事项 1. **镜像问题**：如安装依赖失败，按引用[3]的方法重置 npm 源 `npm config set registry http://registry.npmjs.org`[^3] 2. **命令差异**： - `vue create` 创建的 Vue 2 项目 → 使用 `npm run serve` - `create-vue` 创建的 Vue 3 项目 → 使用 `npm run dev`[^1] --- ### 📌 总结流程 ```mermaid graph LR A[vue create 项目名] --> B[cd 项目名] B --> C[npm install] C --> D[npm run serve] D --> E[浏览器访问 localhost:端口] ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值