百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

零基础入门vue开发（vue快速入门与实战开发）

liuian 2025-06-18 22:20 3 浏览

上面一节我们已经成功的安装了nodejs，并且配置了npm的全局环境变量，那么这一节我们就来正式的安装vue-cli，然后在webstorm开发者工具里运行我们的vue项目。

这一节有两种创建vue项目的方式

  • 1，通过npm命令行创建
  • 2，通过webstorm来一键创建项目

准备工作

  • 1， 我们在创建项目之前，需要确保nodejs已经成功安装，如果你还没有安装没有配置npm全局环境变量，可以参考 《nodeJs的安装与npm全局环境变量的配置》
  • 2，由于国内用npm安装三方依赖时，速度比较慢，建议大家配置国内镜像，配置方式如下。只需要在cmd命令行窗口执行下面操作即可
npm config set registry https://registry.npm.taobao.org

一，使用命令行的方式创建vue项目

  • 1，桌面创建一个空文件夹，如vue0117

进入这个文件夹，然后在顶部地址栏，输入cmd，然后回车键即可快速的打开dos命令行，并且定位到当前目录。


  • 2，然后执行下面命令行，安装vue-cli。
npm install -g vue-cli

等待安装


安装完成如下，这里显示vue-cli的版本号，即代表安装完成


  • 3，使用webpack模板创建一个vue项目
vue init webpack my-project

如项目名为vue001


在出现下面几个询问项时，直接按照箭头所示的操作即可


下载项目所需类库


项目创建完成后，如下


  • 4，cd vue001进入项目目录


  • 5，执行 npm install 下载所需类库 下载中

下载完成


  • 6，使用webstorm打开项目，点击file，然后点击open


导入刚才创建的vue项目


  • 7，运行项目

项目运行成功后，在浏览器里打开下面链接

到这里就代表项目成功的创建并运行了。

二，使用webstorm一键创建vue项目

  • 1，点击file，然后new，然后点击project


  • 2，构建项目


  • 3，等待项目创建和类库加载

耗时可能比较长，耐心等待。。。。


  • 3，上面构建成功后，可以运行并浏览项目了


到这里，两种创建vue项目的方式都讲完了，后面我会录制专门的视频来讲解。敬请期待。

相关推荐

vue是什么东西（vue是干什么的）

首先看看官方网站是怎么解释的，如下：Vue（读作/vju/，类似于view）是一个用于构建用户界面的渐进式框架。与其他单体框架不同，Vue从一开始就被设计为可逐步采用的。核心库仅专注于视图层，易于...

超赞 vue2/3 可视化打印设计VuePluginPrint

今天来给大家推荐一款非常不错的Vue可拖拽打印设计器Hiprint。引入使用//main.js中引入安装import{hiPrintPlugin}from'vue-plugin-...

使用VuePress2.X构建个人知识博客，域名部署到GitHub Pages中

使用VuePress2.X构建个人知识博客，并且用个人域名部署到GitHubPages中什么是VuePressVuePress是一个以Markdown为中心的静态网站生成器。你可以使用Mar...

尤雨溪新品Vite的魔力，详解（尤雨溪新品vite的魔力,详解解析）

上篇《尤雨溪是个恶魔，Vite三天10更》谈到了Webpack这一系列打包工具出现的原因。这些工具的出现是为了解决ESModules模块系统本身的环境兼容问题、以及零散的模块文件导致的...

什么是VUE?vue有什么作用?（vue的主要用途）

什么是vue？Vue.js是一套构建用户界面的渐进式框架，Vue采用自下向上增量开发的设计，其核心库只关注视图层，易于上手，同时vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复...

10个Vue开发技巧「实践」（vue开发需要掌握哪些知识）

作者：WahFung转发链接：https://juejin.im/post/5e8a9b1ae51d45470720bdfa路由参数解耦一般在组件内使用路由参数，大多数人会这样做：exportdef...

刚搭好vuecli结果官网建议升级vite，于是就升级下

从vue-cli迁移到Vite进行迁移的主要原因是速度。Vite的开发服务器速度很快。因为它使用原生浏览器支持JavaScript模块，所以服务器启动时间是即时的。该方法还意味着无论应用程...

无所不能，将 Vue 渲染到嵌入式液晶屏

该文章转载自公众号@前端时刻，https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言之前看了雪碧大佬的将React渲染到嵌入式液晶屏觉得很有意思,R...

【开源】基于 Vue 和 Gin 开发的前后端分离的开源框架

项目介绍Gin-vue-admin是一个基于vue和gin开发的全栈前后端分离的开发基础平台，旨在快速搭建中小型项目。拥有jwt鉴权，动态路由，动态菜单，casbin鉴权，表单生成器，代码生成器等功能...

Firefox正针对Vue.js进行优化，下版本响应速度将“显著提升”

IT之家9月7日消息，据Mozilla官方博客发文显示，Firefox浏览器正针对Vue.js进行优化，此前FireFox浏览器在面向Vue3时遇到了一些性能问题。▲图源...

vue:生命周期钩子函数及顺序（vue3.0生命周期函数）

一、vue的钩子相关顺序Vue实例有一个完整的生命周期，在newVue（）后，会初始化数据，如下：//初始化的入口，各种初始化工作initMixin(Vue);//数据绑定的核心方法，包括常用...

使用 Pinia ORM 管理 Vue 中的状态

转载说明：原创不易，未经授权，谢绝任何形式的转载状态管理是构建任何Web应用程序的重要组成部分。虽然Vue提供了管理简单状态的技术，但随着应用程序复杂性的增加，处理状态可能变得更具挑战性。这就是为什么...

搭建Trae+Vue3的AI开发环境（vue ide 开发工具）

从2024年2025年，不断的有各种AI工具会在自媒体中火起来，号称各种效率王炸，而在AI是否会替代打工人的话题中，程序员又首当其冲。作为一个后端开发，这篇文章基于Trae工具，来创建和运行一个简单的...

如何在Vue3中使用Nuxt进行服务端渲染开发?

服务端渲染SSR(Server-SideRendering)是一种在服务器端生成网页内容的技术，这种实现方式与传统的客户端渲染CSR(Client-SideRendering)有所不同。在SSR中...

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

webpack、vite、vue-cli、create-vue这些都是什么？看着有点晕，不要怕，我们一起来分辨一下。先看这个表格：脚手架vue-clicreate-vue构建项目vite打包代码we...

一周热门
最近发表
标签列表