使用vue-cli构建项目步骤

最新推荐文章于 2023-05-26 15:40:57 发布
原创 最新推荐文章于 2023-05-26 15:40:57 发布 · 1.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue-cli

本文详细介绍了如何使用Node.js和vue-cli快速搭建一个Vue.js项目。步骤包括：安装Node.js、使用npm全局安装vue-cli、利用vue-cli初始化项目、安装项目依赖及运行本地服务器进行项目预览。

1、Node.js安装

      https://nodejs.org/en/download/

2、安装vue-cli

      npm install -g vue-cli

3、使用vue-cli初使化项目

       vue init webpack projectName

4、进入项目目录

      cd projectName

5、安装依赖

      npm install 

6、开始运行

      npm run dev

7、访问项目

      localhost:8080

在使用vue-cli构建的项目中复制ToDoList_ToDoList-vuecli.zip
10-16
使用Vue-cli构建一个TodoList项目涉及到的步骤包括项目初始化、文件和目录结构的组织、功能开发、测试和调试、以及最终的打包和部署。Vue-cli的使用大大简化了这个流程，使得开发者可以将更多的精力放在业务逻辑和...
vue-cli构建vue项目的步骤详解
10-17
综上所述，使用vue-cli构建Vue项目分为环境搭建、项目初始化、启动项目三个主要步骤。环境搭建包括安装Node.js和npm；项目初始化涵盖了使用vue-cli工具创建项目、配置项目所需组件、选择代码规范等；最后通过`npm ...
vue-cli快速构建Vue项目
weixin_34306446的博客
01-06 178
vue-cli是什么？ vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。 vue-cli怎么使用？ 安装vue-cli之前，需要先装好vue 和 webpack npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli ...
使用vue-cli来构建项目
南帝
05-05 507
首先，通过我的上一篇博客，搭建好vue的环境和工具之后，https://mp.youkuaiyun.com/postedit/80141017。我们来简单的用vue-cli来构建项目，测试是否成功。首先，查看各项准备工作是否完善。使用 npm -v,cnpm -v,node -v ,webpack -v，vue -V指令查看。各项都安装成功之后，我们使用vue-cli来构建项目1.在硬盘上找一个文件夹放工程...
vue-cli构建项目
mldwyy的博客
03-15 204
之前做过的东西再用到的时候总是忘记，于是决定写博客记录下来方便自己以后用 1.输入node -v确定node版本高于4.0 2.全局安装vue-cli: sudo npm install -g vue-cli 安装完成后输入vue命令测试，如下图 3.vue init webpack 项目名 回车后需要输入项目描述，项目作者，还有项目是否使用ESLint等 4.进入项目目录： cd 项目名 5....
vue-cli项目修改文件热重载失效的解决方法
10-17
然而，开发者在使用vue-cli进行项目开发时，偶尔会遇到文件热重载失效的问题，这会导致开发效率骤降，影响开发进度。此类问题发生的原因可能有很多，而本文所描述的案例中，原因被定位为集成开发环境（IDE）WebStorm...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
通过上述步骤，我们就能够使用Webpack 4和Vue搭建一个基本的Vue-cli项目，并对项目的构建过程有所了解。在实际开发中，对于更复杂的需求，比如代码分割、热模块替换等，Webpack提供了丰富的插件和工具来支持。只有...
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中，静态资源如果放在了固定的位置，无论是使用相对路径还是绝对路径，都不会出现404错误，因为Webpack在构建过程中会将这些静态资源复制到构建目录。 然而，动态图片路径问题的出现，主要是因为...
使用vue-cli 构建项目
一只小棉花的博客
11-19 384
1、打开cmd命令窗口，进入项目目录，执行 vue init webpack myfirstvue 2、输入命令后，会跳出几个选项让你回答： Project name (myfirstvue)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters） ...
Vue-cli构建vue项目
wang306033的博客
05-25 235
#构建vue项目 自娱自乐的前端构建 首先安装相关编译环境 仅用于记录 本机已安装 node(v12.16.2)、 vue-cli(@vue/cli 4.3.1)、npm(v6.14.4) 、cnpm 编译工具 vscode 1.新建项目文件夹FrankFront vscode打开项目文件夹 执行命令：vue init webpack frankfront vue init webpack frankfront cd frankfront npm install npm run dev 截止目前，项目已完
使用Vue-cli构建一个项目Vue项目
wyqgg123的博客
08-12 261
​ 使用Vue-cli构建一个项目Vue项目 1、安装vue-cli 前提条件是已安装node、npm才可以执行下面的指令 npm install -g @vue/cli @vue/cli-init 安装成功后查看版本 这里很多人会遇到报错，具体解决方案我在下一篇文章详细解决。 vue -V 成功页面： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kGVhmCLR-1628736056827)(C:\Users\快定\OneDrive\桌面\笔记\笔记\image\im
Vue进阶之Vue-cli构建项目
FavoriteStudent的博客
05-17 999
前置条件：电脑已安装node.js，能正常使用npm，检测是否安装了npm及版本情况，可以直接在命令行中输入 npm -v，如果出现版本号说明已安装node。如果没有安装node的，请去node官网下载，下载地址为https://nodejs.org/en/download。接下来，使用命令 npm install -g vue-cli，其中"-g"代表全局安装，安装成功之后，可以使用vue -V...
使用Vue-cli构建项目
love and share
06-03 283
1. 使用淘宝镜像全局安装 cnpm npm install cnpm -g --registry=https://registry.npm.taobao.org 2. 全局安装Vue-cli cnpm install vue-cli -g 3. 检查是否成功安装 Vue,若提示vue版本则表示安装成功 vue --version 4. 构建项目 首先使用cd进入e盘,使用vue构建命令名为my-test-vue的项目文件 cd E:\ vue init webpack ...
用Vue-CLI搭建项目
qq_52335038的博客
09-28 2487
项目名称：顶楼人员管理 简介：博主我酷爱韩剧顶楼，利用所学知识，创建一个顶楼人员管理系统。 功能：登录界面、注册界面、首页、普通用户管理页、顶楼用户管理页 技术：采用前后端分离技术开发运行。 下面开始进入正题： 一、环境搭建： 1.创建一个文件夹，并给项目文件夹命名Attic。 2.在终端上运行 npm i -g @vue/cli命令。 3.在终端上运行vue create attic命令，创建Vue项目名称。 4.手动配置一下Vue项目。（谁让博主我这么细...
vue-cli搭建项目
qq_43075770的博客
04-18 206
搭建项目之前，请确认好你自己已经安装过node、npm,、vue-cli（本文以vue-cli4为例）
使用 Vue-cli 创建项目
weixin_53156345的博客
05-05 1430
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vjcxSwAK-1683203828586)(D:\杂物房\笔记\和项目相关\image\dong.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ITkxqy8a-1683203828586)(D:\杂物房\笔记\和项目相关\image\wen.png)]​ 通过 ↑↓ 箭头选择依赖，按 “空格” 是否选中，按 “a” 全选，按 “i” 反选。如果有需要的可以选择 “y”
Vue-Cli项目搭建
m0_61976036的博客
05-26 366
vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义 好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个 骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速。统一的目录结构；本地调试；热部署；单元测试；集成打包上线。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值