Vue之第一个vue-cli项目

最新推荐文章于 2022-04-17 00:34:22 发布
最新推荐文章于 2022-04-17 00:34:22 发布
阅读量322 收藏
点赞数
分类专栏： 笔记 文章标签： vue npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/The_Beacon/article/details/108960470
版权
本文介绍了如何使用vue-cli创建第一个Vue项目。首先解释了vue-cli是一个官方提供的项目模板生成器，提供统一目录结构、本地调试、热部署等功能。接着，详细说明了安装Node.js和Git的步骤，并建议安装cnpm作为npm的加速器。然后，通过在命令行中运行指令创建Vue项目，选择不安装额外组件。最后，展示了项目初始化和运行后的目录结构。
摘要由CSDN通过智能技术生成

1、什么是vue-cli

  • vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板
  • 预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；

主要的功能

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

2、需要的环境

安装nodejs：

最低0.47元/天 解锁文章
The_Beacon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目流程demo示例
tang31415926的博客
03-07 1327
自己写从头做一个vue项目，没什么技术，主要是温故流程。 没写完，只写到创建完项目。
Vue-cli搭建demo项目
William_fang的博客
01-13 493
文章目录1.查看版本号2.安装淘宝镜像3.vue-cli安装4.查看是否安装5.下载模板6.进入文件目录，安装依赖 1.查看版本号 node -v ：查看node.js版本号 npm -v ：查看npm版本号 2.安装淘宝镜像 npm install --registry=https://registy.npm.taobao.org 3.vue-cli安装 npm install vue-cli -g 4.查看是否安装 vue list 5.下载模板 vue init webpack firstvue
制作命令行界面（CLI）带来乐趣和收益
编程故事的地方
02-04 296
下次您有一个主意????“我知道...我为什么不编写脚本来自动执行此操作？” 实际上，您不应该编写CLI 代替。 CLI具有比脚本更好的结构。 而且，CLI使用命令标志和帮助文本来防止您犯一些愚蠢的错误。 例如： $ moa -- help Moa makes it easier to run your local node.js apps. USAGE $ moa OPTIONS ...
搭建vue项目环境以及创建一个简单的vue的demo
weixin_39643007的博客
05-08 1580
一、vue-cli脚手架的搭建步骤 1.首先，确定你的电脑上已经安装了nodejs，可以使用npm包管理器安装环境，如果还没有安装node环境，则需要安装node.js 这个很简单 默认点击安装完成即可 这里不不做演示了 2.创建一个项目存放的文件夹目录，然后进入到该目录下 按Shift+鼠标右键点击在此打开PowerShell窗口，此时可使用node -v检查node的版本，如...
如何搭建一个vue项目(完整步骤)
没有在适当的年纪做正确的事，非刻意而为之，知识后知后觉!
04-17 17万+
一、环境准备 1、安装node.js 下载地址：https://nodejs.org/zh-cn/ 界面展示 2、检查node.js版本 查看版本的两种方式 1|node -v 2|node -version 出现版本号则说明安装成功（最新的以官网为准） 3、为了提高我们的效率，可以使用淘宝的镜像源 输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源 以后再用到npm的地方直接用cnpm
Vue-cli搭建vue基础项目
xcymorningsun的专栏
01-08 3582
目录 一、引言 二、项目创建 1、安装node 2、全局安装cnpm 3、全局安装webpack和webpack-cli 4、全局安装vue-cli 5、使用vue-cli创建项目 6、开发运行项目 7、打包发布项目 8、调试工具插件 三、总结   一、引言           首先必须明确vue-cli是什么，就是一个脚手架，为了方便使用创建webpack项目，这个...
vue-cli构建vue项目
soos的博客
09-13 672
第一步：在node.js官网下载node.js并安装。 第二步：安装vue-cli。 打开DOS控制台，进入都指定文件E:\vue-cli夹输入：npm install -g vue-cli进行安装（这里vue-cli是全局安装的进入不进入文件夹都可以）。 第三步：检查版本，看是否安装成功,在控制台输入vue -V，如果出现版本号则表示安装成功。 第四步：使用vue-cli初始化项目。
详解项目升级到vue-cli3的正确姿势
12-02
Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建 Vue 项目。Vue CLI 3 是其第三个主要版本，带来了许多改进和优化。在将项目从旧版本的 Vue CLI 升级到 Vue CLI 3 时，需要遵循一定的步骤以确保顺利过渡。...
vue-plugin-cli
04-02
Vue CLI 插件是一种扩展Vue CLI功能的方式，允许开发者为项目添加特定的功能或集成第三方服务。"vue-plugin-cli"很可能是指一个创建和管理Vue CLI插件的工具，可能是为了方便开发者自定义他们的开发环境或者提供特定...
使用vue-cli脚手架工具搭建vue-webpack项目
10-17
首先，搭建VueWebpack项目的第一步是确保你已经安装了Node.js环境。Node.js是JavaScript的服务器端运行环境，包含了npm（Node Package Manager），它是用来管理JavaScript库和项目的工具。你可以访问Node.js官方网站...
vue-cli3.0完整项目demo
09-20
vue-cli3.0完整项目demo，路由配置以及vuex多store配置以及调用，不错的学习资料。
vue-cli demo
10-24
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项目内的配置文件进行配置； 可以通过插件进行扩展。 一个丰富的官方插件集合，集成了前端生态中最好的工具。 一套完全图形化的创建和管理 Vue.js 项目的用户界面。 Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject
使用官方脚手架搭建的 vue.js demo 项目
10-23
这个是使用官方脚手架搭建的一个 vue.js 的 todolist 的项目，代码很简单，供参考
Vue-Cli项目优化操作的实现
10-16
首先，路由懒加载是优化项目加载速度的一个重要手段。Vue-Router官方文档推荐的懒加载方式是将大的JavaScript模块拆分成更小的部分，只在用户访问对应路由时按需加载。在Vue-Cli项目中，原本的组件引用方式是`import...
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
01-19
用vue-cli构建了项目之后在webstorm开发，用npm run dev跑本地服务，经常修改之后在浏览器刷新没反应，偶尔才会有刷新，需要重新跑一遍npm run dev才会更新，这是怎么回事呢？ 解决方法 webstorm保存的时候会先保存...
【vue】创建第一个vue+element ui项目（全网最详细）
liuzhenhe1988的专栏
10-22 3万+
前言 在之前的篇章中咱们一起搭建了vue开发环境，接下来开始创建第一个vue+element项目吧（vue：前端JavaScript框架 element：前端UI框架） vue开发环境搭建请参考【vue】在windows中搭建vue开发环境（全网最详细） 创建vue项目 一、开发工具vs code 1、创建一个存放项目的文件目录，如：C:\Project\VUE 2、在文件目录空白处，右键点击“通过code打开”（推荐使用vs code 开发） 3、通过以下截图打开终端，如下图
VUE-CLI初始化项目
AyayaOVO的博客
06-26 911
1、vue init命令讲解 用vue init命令来初始化项目，具体使用方法如下： vue init <template-name> <project-name> init：表示要用vue-cli来初始化项目 ：表示模板名称，vue-cli官方提供的5种模板： webpack：一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。 webpack-simple：一个简单webpack+vue-loader的模板，不包含其他功能，让
vue-cli 基础Demo使用
zzxwx的博客
05-29 322
HelloWorld.vue 改造成自己的页面 <template> <element> <br> <input v-model="msg" @keydown="doAdd($event)"/><button @click="addTitle()">添加列表</button> ...
vue-cli入门（三）——人员管理实例
大灰狼的小绵羊哥哥的博客
04-23 1万+
前言 在开始开发实例前，应首先了解一下vue-cli的项目结构。接着我们一起来实现一个小demo——人员管理，功能简单，通过这个实例让大家熟悉使用vue-cli开发项目的一些操作，加深对vue-cli项目结构的印象。http://www.jianshu.com/p/5d9b341d650f 实例功能简述 人员管理项目，有两个页面，首页和管理页，管理页主要实现一个简单的增删改功能，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值