Vue2.0第一步--快速生成初始代码和插件安装

最新推荐文章于 2024-07-04 23:17:46 发布
最新推荐文章于 2024-07-04 23:17:46 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： 积累经验 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmwmdtt/article/details/53819400
版权
本文介绍了如何使用Vue2.0的脚手架工具生成初始项目代码，并详细讲解了Vue-Router的安装步骤。首先，通过`vue init webpack labexam`创建项目，然后使用`npm install`下载依赖。接着，演示了Vue-Router的添加，包括在`package.json`中添加依赖、安装、查看模块名称并引入到项目中。最后，提醒开发者避免使用HTML元素作为组件ID。
摘要由CSDN通过智能技术生成

Vue2.0 第一步 

1:打开控制台,利用脚手架工具来创建工程相关代码

Node需要4.0+

查看node需要命令node -v

安装vue-cli命令:npm install -g vue-cli,

完了再查看vue命令: vue

看到了常用的vue命令有:vue list(列出可用的模板)

谷歌一下就是:


所以模板我们选webpack

那么我们起名字叫labexam,用vue initwebpack labexam

最低0.47元/天 解锁文章
也不是什么极客
关注
专栏目录
create-vue快速生成项目，到底是怎么做的
郊眠寺
03-13 1617
前段时间我们有去探索了一下vue-clicra的原理，生成项目的过程，他是基于webpack的，但是今天我们的主角是create-vue，他是基于vite的，为什么要使用vite而不是webpack呢？因为vite比webpack快。我们使用vue-cli和vitewebpackvite就目前的图来看vite在构建、启动项目的时候会比webpack快10倍，这还是仅仅只是简单的项目，前端的项目复杂程度本来就是呈指数上升的，这时候vite与webpack可谓是天差地别。那么接下来我将带领大家一步一步去探索。
vscode快速生成vue2及vue3模版
weixin_54048131的博客
01-14 5829
在中，我们每次新建页面都会需要写一大部分重复代码。那么有什么办法，能够建立模版：vscode是可以进行相关配置的。
一款快速生成Vue3代码的插件：Vue VSCode Snippets
m0_57540655的博客
04-02 894
vbase-3| Single File component Composition API with SCSS带SCSS的单文件组件组合API || Single File component setup Composition API with SCSS带SCSS的单文件组件安装组合API || Single File component Composition API with Reactive and SCSS带有Reactive和SCSS的单文件组件组合API |vbase-css。
Vue 3使用快捷键快速生成模板
最新发布
赫客的博客
07-04 834
代码片段是一种预先定义的代码模板，可以在编辑器中快速插入，以减少重复性编码工作。它们对于快速启动新项目或组件非常有用。个人苦于手动敲一大堆重复代码所研究发现，不过似乎也有其他方式可以快速生成，仅供参考！
D - Vue快速生成项目-安装插件
无生 的博客
09-03 221
项目初始化 vue init webpack 项目名 ? 项目名称 ? 项目描述 ? 作者 ? Vue build standalone ? 安装vue-router组件 (建议安装) ? 安装ESLint组件,对代码格式要求高 (不建议安装) ? 单元测试 ? e2e测试 ? (无脑选 npm ) 常用插件 每次建项目都忘记需要那些插件 或 忘记怎么配置 ,干脆全部集合在一起 本文是 Vue2 ,Vue3的配置可能有细小的不同 Vuex npm install vuex --save imp
7004.vue脚手架快速生成项目
写给自己的笔记
01-28 176
1 Vue脚手架可以快速生成Vue项目基础的架构。 1.1 安装3.x版本的Vue脚手架： npm install -g @vue/cli 1.2基于3.x版本的脚手架创建Vue项目： 1.2.1 使用命令创建Vue项目 命令：vue create my-project 1.2.1基于ui界面创建Vue项目 命令：vue ui 在自动打开的创建项目网页中配置项目信息。 1.2.3基于2.x的旧模板，创建Vue项目 npm install -g @vue/cli-init vue i
VUE插件的安装（2.0）
hackair1的博客
03-03 2032
1.首先启动VUE，如下图： 启动完毕后，咱们首先创建一个新的项目，步骤如下： 点击创建选项，如下图 注意：这里的设置是指定创建项目的根目录。也就是咱们所谓的工程目录位置。指定好工程位置后，咱们点击在此创建项目。此时出现如下图： 输入你的项目名称后，点击下一步后，出现如下图： 在这里一定记好了选择手动。点击下一步 这几个选项一定给他打开。 打开后点下一步，出现如下图： 将配置选择我这个样子，点击创建项目。 此时提示是为你的这个项目给个预设...
【Vue2.0】笔记（六）-Vue-cli、Vuex、mockjs、gitee、github
小女不才
04-08 2283
前端工程化（四）Vue脚手架(1) 基本用法1.1（五）Element-Ul的基本使用二级目录三级 （四）Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。官网地址：https://cli.vuejs.org/zh/ (1) 基本用法 安装3.x版本的Vue脚手架： npm install -g @vue/cli 卸载命令：npm uninstall -g vue-cli 检查命令 Vu...
vue-loader+webpack项目配置
m0_37840862的博客
07-29 2564
1.项目准备 安装之前请确保安装了nodejs和npm，在命令行输入node -v查看是否安装node 在vscode终端里面这是npm的镜像仓库，会提高下面下载的速度 # 配置仓库地址 npm config set registry https://registry.npm.taobao.org # 验证是否成功命令 npm config ls 当验证命令结果如下图，则表示成功了 2.初始化项目 创建空文件夹"webpackVue"，然后用vscode打开，然后打开vscode终端 # 将项目初始化成
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 8818
未完
若依后台代码学习框架 vue版本前后分离最新版
01-22
4. **README.md**：这是项目的重要文档，通常包含项目的简介、安装指南、使用方法以及开发者需要注意的事项等，是理解项目的第一步。 5. **pom.xml**：这是Maven项目对象模型的配置文件，表明该项目是基于Java的，...
VScode 插件、自定义配置快捷生成vue模板代码
weixin_60463255的博客
02-08 994
1、 Chinese Language ：中文汉化包，设置后会提示重启 2、 Bracket Pair Colorizer ：设置括号颜色，方便嵌套的时候区分结构 3、 Auto rename Tag ：标签补全 5、 HTML CSS support：在编写样式表的时候，自动补全功能大大缩减了编写时间 6、 JavaScript (ES6) code snippets：提供ES6的语法支持 8、 Live server ：右键可以快速在浏览器中打开我们的...
Vue 2 插件快速开发和发布教程
Meta.Qing的博客
07-19 986
通过按照以上步骤开发和发布 Vue 2 插件，你可以将多个组件封装为一个插件，并提供自定义前缀的能力。其他开发者可以按需引入你的组件，并在他们的项目中使用你的插件，从而实现组件的复用和可扩展性。同时，他们也可以使用全局注册的方式将你的插件注册为 Vue 的全局插件，并在整个应用中使用你的组件。7.使用插件：其他人可以使用你发布的插件，只需在他们的 Vue 2 项目中安装并使用它。5. 发布插件：将插件发布到适合的包管理器（如 npm）上，以便其他人可以安装和使用它。文件夹中生成插件的构建代码。
Vue从零开始（2）：使用Vue CLI快速生成项目脚手架
wang13145的博客
08-07 144
前言 上一篇讲到如何搭建前端环境，这一篇我们开始使用Vue CLI来快速生成一个Vue的项目脚手架。 目前Vue CLI有两个版本，新版本Vue CLI3对应@vue/cli，老版本Vue CLI2对应vue-cli。这里分别介绍这两个版本如何创建一个项目。 首先全局安装这两个的其中一个（看过我第一篇已经安装过的可以忽略掉）： $ cnpm install -g @vue/cli $ cnpm install -g vue-cli 注意：在同一个环境安装Vue CLI3和Vue CLI2
VSCode设置代码块(Snippets)，快捷初始化vue模板
weixin_38252066的博客
01-14 1123
本文用作记录Vue Snippets Code -> Preference -> User Snippets -> New (global) Snippets （可选当前文件和全局配置），复制以下配置，保存。 使用：”prefix“值为快捷方式，适用.vue后缀的文件。 { "Print to console": { "prefix": "vue", "body": [...
vue基础结构一键生成的代码模块添加
aocang1339的博客
05-27 445
把下面的代码复制到html.json文件中。打开html,json的文件步骤，点击文件，然后选首选项，然后选用户代码片段，然后输入html，选择html.json。 把下面的代码粘贴过去。 { "Vue": { "prefix": "vue", "body": [ "<!DOCTYPE html...
自动生成组件代码—— Vue CLI 插件开发实战
weixin_53777231的博客
12-26 861
自动生成组件代码—— Vue CLI 插件开发实战 前言 近期工作的过程中跟Vue CLI的插件打交道比较多，想了想自己在学校写项目的时候最烦的就是项目创建之后手动创建组件/页面和配置路由，于是突发奇想决定写一个脚手架的插件，自动实现创建组件/页面和配置路由的功能。 本文会一步一步教你如何编写一个自己的Vue CLI插件，并发布至npm，为所有因为这个问题而烦恼的同学解放双手。 关注「Hello FE」获取更多实战教程，正好最近在抽奖，查看历史文章即可获取抽奖方法~ 本教程的插件...
一键快速生成 Vue 的 HTML页面结构代码
南野子
03-24 388
原文链接：https://blog.csdn.net/zglibk/article/details/110573222 保存下来万一下次找不到了~~~~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值