创建vue-cli项目并且运行

最新推荐文章于 2023-12-13 17:23:22 发布
最新推荐文章于 2023-12-13 17:23:22 发布
阅读量150 收藏 2
点赞数
分类专栏： vue-cli 文章标签： Vue CLI 项目创建 npm 运行 开发服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuru974882032/article/details/113827759
版权

1、vue-cli 全局安装

npm install -g vue-cli

在cmd中输入vue -V可以打印出版本号代表安装成功
在这里插入图片描述

2、创建vue-cli项目

cd到指定目录下执行命令

vue create vue-demo

弹出窗口，前面两个选项为默认配置只是vue版本不同，如需要自定义配置则选择第三个
在这里插入图片描述
创建完成后会在文件夹中生成目录
在这里插入图片描述

3、运行项目

3.1 cmd窗口cd到项目文件夹
3.2 执行命令

npm run serve

在这里插入图片描述
运行成功后会打开窗口如下
在这里插入图片描述
3.3 在浏览器中访问路径http://localhost:8080/查看是否正常启动
在这里插入图片描述

yuru974882032
关注
专栏目录
创建vue项目并运行
qq_57224204的博客
01-08 178
安装好node.js，配置好vue项目运行环境后，创建vue项目并运行的方式。
使用Vue Cli 创建并运行Vue项目
m0_55922467的博客
08-30 2092
使用vue-cli 创建并运行vue项目的过程
创建并运行Vue项目
小渡小渡的博客
12-13 399
一、下载安装node.js。
新建vue2项目，并运行
qq_40981804的博客
01-26 474
新建vue项目的文件夹并进入 初始化 my-project：为文件夹名称 webpack ：基于webpack 的项目 vue init webpack my-project 输入之后就一直回车，直到出现是否要安装vue-router，这个我们在项目要用到，所以就输入y 回车 出现这个初始化完成 ### 文件夹已经下载好了，现在就可以进入文件夹，输入： cd my-project 回车，因为各个...
快速创建一个Vue项目并运行
weixin_50801860的博客
10-07 1528
1、电脑首页搜索输入“cmd”，选择命令提示符（cmd），回车进入命令提示符（cmd）界面。2、输入所创建项目的目录，我这里选择E盘，输入“E:”，回车。3、输入“vue create demo”并回车创建项目，其中demo是项目名。项目正在创建。。。4、创建成功后进入E盘目录发现新建了一个名为demo的文件夹。5、输入“cd demo”打开demo项目。6、输入“cnpm run serve”运行项目。​
使用vue-cli创建项目
Web_boom的博客
11-29 966
至此一个vue项目创建完毕，根据需要添加功能页面。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
vue-cli-plugin-component-创建组件的Vue CLI 3插件-Vue.js开发
05-27
vue-cli项目的vue-cli-plugin-component组件插件│README.md│LICENSE（可选）└───src│├──index.js│└───components│vue-cli-plugin-component组件vue-cli项目的插件│README.md│LICENSE（可选）└─...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
同时，Vue.js也迅速成为前端主流框架之一，结合Vue的脚手架工具Vue-cli，可以极大降低项目搭建的门槛。本文将详细介绍如何使用Webpack 4和Vue来搭建一个Vue-cli项目，从而实现快速开发Vue应用。 首先需要了解，...
vue-cli2与vue-cli3在一台电脑共存的实现方法
10-16
使用Vue CLI2创建项目，可以通过`vue-cli2 init webpack`来创建一个使用webpack模板的新项目；而使用Vue CLI3，可以使用`vue-cli3 create my-project`来创建项目，其中`my-project`是你想要的项目名称。 以上就是...
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
01-19
1.vue-cli 构建项目 //全局安装 vue-cli npm install - g vue- cli //创建一个基于 webpack 模板的新项目 vue init webpack my- project //cd 进入刚新建的项目文件(my-project) cd my- project // 运行 ...
vue-cli-plugin-electron-builder-适用于Electron的Vue CLI 3插件，无需使用Electron Builder的必需配置。-Vue.js开发
05-27
：在使用Vue-CLI 3或4创建的应用程序目录中打开一个终端（建议使用4）。 然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器：vue add electronic-builder就是这样！ 您准备好出发了！ 要...
创建vue项目，并且在idea运行（超详细）
qq_52178957的博客
11-08 878
1.新建一个项目 2.利用cmd进入该文件夹，进入文件夹的方式为 cd + 文件夹名字 3.创建vue项目输入： vue create myvue 按ctrl+z进入下面界面 我这边选择vue2，可根据自己的需求选择，然后回车等待项目的创建 创建完成，可以去项目文件夹看 目录如下 在idae打开myvue项目，可以使用其他软件如：vscode，WebStorm等等 配置npm 配置server install build （修改主要命令和脚本) 在终...
新建一个vue项目_运行一个vue项目
weixin_29056145的博客
01-30 404
运行一个vue项目今天我们来怎样运行一个vue的初始项目1.首先我们需要启动文件夹中启动cmd，找好路径2.这里我们用npm来构建vue项目，如果大家还不是很清楚npm是什么，或者不会使用安装，这里我建议大家百度了解一下，顺便安装一下node.js,这样我们就可以正常使用了3.言归正传，我们在cmd中输入vue init webpack my-project，它会询问你项目名称等等，其中...
Vue 项目创建及运行
weixin_44244924的博客
03-29 207
vue项目创建及运行
Vue怎样新建并启动项目（图文教程详解）
BADAO_LIUMANG_QIZHI的博客
11-25 1179
新建项目 进入到想新建项目的目录，在此处打开命令行窗口，然后输入： vue init webpack vuemusicplayer 其中 webpack 是模板，vuemusicplayer是项目名，然后回车 此时会提示你输入项目名，如果直接回车则使用上面默认的项目名。 然后依次输入描述、作者，然后直接回车。 然后询问你是否安装Vue Router，输入y，安装，其他的不需要...
Vue(二)：新建Vue文件并运行
偉ing的博客
05-04 3104
Vue(二)：新建Vue文件并运行 ​ 在上一篇博客中我们已经创建了Vue项目并且分析了Vue的目录结构，我们主要开发的地方在src文件夹中，今天我们就来讲一下然后创建Vue文件并且在浏览器中运行出来。 更改vscode settings.json文件 ​ 首先我们要知道的是，因为我们是使用npm新建的项目，所以在一些配置文件中规定了Vue的代码格式，也就是说不按照这种格式来书写的话，终端就会报错...
Vue创建、运行
苏杭
05-27 94
我们采用实战模式并结合ElementUI组件库，将所需要的知识点应用到实际中，以最快速度领会Vue的使用。 文章目录创建工程 创建工程 注意：命令行需要管理员模式运行 1.创建一个名为hello-vue的工程 vue init webpack hello-vue 2.安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件 #进入安装工程目录 cd hello-vue #安装vue-router npm install vue-router --s
【CSS Tricks】像素风字体、图片
最新发布
09-17
包含像素风中英文字体，鼠标手势普通状态、点击状态和禁用状态，仅用作技术分享学习研究，不可用于其他用途。
使用Intellij IDEA创建vue-cli项目教程
"本文主要介绍如何使用IntelliJ IDEA搭建Vue CLI项目，包括安装和配置必要的环境，以及在IDEA中进行项目构建和运行的详细步骤。" 在开发Web应用程序时，IntelliJ IDEA作为一款强大的集成开发环境(IDE)，为开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值