Vue介绍(一)--创建Vue基础工程

最新推荐文章于 2024-06-17 06:00:00 发布
最新推荐文章于 2024-06-17 06:00:00 发布
阅读量289 收藏
点赞数
分类专栏： Vue 文章标签： vue.js html javascript es6 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/as6950426a/article/details/105314455
版权

Vue

创建Vue基础工程

由于近期对知识的渴望，以及未来项目技术的需要，开始准备对Vue这门前端流行的技术进行学习以及个人知识总结进行记录，以上说明仅代表个人理解，如果错误，还请各位大佬指点出来，及时纠正。

Vue工程-创建方式一

1. 在终端中输入vue ui

在这里插入图片描述
使用vue ui命令需要在vue版本3.0以上才能支持

2.终端通过输入的命令，vue开始启动浏览器打开ui页面

在这里插入图片描述
在这里插入图片描述

3. 准备开始着手创建Vue项目

在这里插入图片描述

4.选择创建

在这里插入图片描述

5.选择创建项目目录

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200404185442883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzNjk1MDQyNmE=,size_16,color_FFFFFF,t_706.输入项目名，点击下一步
在这里插入图片描述

6.选择手动创建，因为需要选择对应的配置

在这里插入图片描述
在这里插入图片描述

7.选择下一步，不保留模板，等待创建成功

在这里插入图片描述

8.项目创建好了，会出现这个页面，为了测试下创建的项目是否成功，我们需要运行下

在这里插入图片描述

9.等待项目启动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Vue项目创建方式二

在这里插入图片描述

1.控制台输入vue init webpack 项目名称

2.此处有个前期，使用vue init命令需要安装init依赖，安装命令"npm install -g @vue/cli-init"

在这里插入图片描述
在这里插入图片描述

3.等待安装依赖

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Mr.Yang_Hack
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目启动设置默认启动页
Yajyaj123的博客
09-11 1万+
vue项目启动设置默认启动页
如何创建vue项目，创建的方式？
weixin_73184582的博客
04-19 4671
以上就是使用 Vite 工具创建 Vue 项目的方法，Vite 是一个基于 ES Module 的开发工具，可以帮助开发者快速搭建 Vue 项目，并提供了快速热重载、按需加载等功能，可以大大提升开发体验。以上就是使用 Webpack 创建 Vue 项目的方法，虽然需要手动配置比较复杂，但是可以根据需求进行高度的自定义和扩展，是比较灵活和强大的构建工具。首先需要安装 Node.js 和 npm 包管理器，Node.js 官网提供了对应的安装包和指南，可以根据自己的操作系统和版本选择下载和安装。
VUE3脚手架工具cli配置搭建及创建VUE工程
最新发布
雾林小妖的博客
06-17 1518
VUE3脚手架工具cli配置搭建及创建VUE工程
【创建vue项目的三种方式】
regretTAT的博客
06-06 7182
【代码】【创建vue项目的三种方式】
创建vue工程项目的5种方式
weixin_47389477的博客
02-20 858
注意：首先需要npm i -g @vue/cli, vue-cli3.x的初始化方式，另外，如果创建的是vue2项目，脚手架vue-cli要使用3.x版本的。vue create 项目名(例:vue-project)会出现图像化界面（图二）
Vue项目创建与启动（2023超详细的图文教程）
Alphamilk的博客
11-01 1万+
一、下载node.js ， 二、下载vue-cli与webpack插件 ， 三、项目初始化(项目配置详细信息) ，四、项目启动 ， 五、Vue项目工程结构（扩展知识）
vue使用vue-cli快速创建工程
01-19
本文介绍了vue使用vue-cli快速创建工程，分享给大家，具体如下： vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue ...
vue-admin-template-4.4.0.zip
03-01
Vue Admin Template则是基于Vue.js构建的后台管理界面模板，为开发人员提供了一个快速搭建后台管理系统的基础架构。4.4.0版本是这个模板的特定迭代，可能包含了性能优化、新功能和错误修复。 在"vue-admin-template...
vue-vben-admin-main源码
12-19
4. **Vue CLI**：虽然未明确提及，但很可能项目是使用Vue CLI创建的，这是一个官方提供的命令行工具，用于快速初始化Vue项目，包含了webpack配置和许多有用脚手架。 5. **构建和运行**：`npm build`是构建项目的...
audio 播放器 在vue-audio-better上增加图标名称和大小
04-27
在给定的项目中，我们看到一个基于Vue.js的音频播放器组件——vue-audio-better，它被用于非工程化的项目，意味着它可能不是通过现代前端构建工具（如webpack）进行模块化管理的，而是直接在HTML文件中引入Vue.js和...
创建一个Vue工程
qq_39476654的博客
05-06 122
创建一个前端vue工程，从零开始。开发环境windows 10 第一步，安装nodeJS 下载地址：http://nodejs.cn/download/ 安装nodeJS，是为了安装npm工具。npm用于管理前端开发资源包。安装完成nodeJS，以后，在cmd命令行输入 : npm -v 试试，成功安装，会展示npm的版本信息。 第二步、安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 第...
vue工程，新建的项目工程
03-23
vue工程，新建的项目工程，vue工程，新建的项目工程，vue工程，新建的项目工程
如何搭建一个vue项目(完整步骤)
Williamqin_的博客
07-22 8322
config文件夹主要存放配置文件，用于区分开发环境、线上环境的不同，常用到此文件夹下config.js配置开发环境的端口号、是否开启热加载或者设置生产环境的静态资源相对路径、是否开启gzip压缩、npmrunbuild命令打包生成静态资源的名称和路径等。cmd命令，因为是全局的，所以在哪里打开都行，注意运行的时候不能关闭cmd窗口，不然就停止服务了，如果电脑太卡，可以直接在浏览器输入http//localhost8000/...
搭建一个vue项目(完整步骤)
热门推荐
duanna0824的专栏
06-22 2万+
一、安装node环境　　1、下载地址为：Node.js　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功　　3、为了提高我们的效率，可以使用淘宝的镜像：npmmirror 中国镜像站　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。　　检查是否安装成功：二、搭建vue项目环境　　1、全局安装vue-cli　　npm install --
Vue 工程基础知识
weixin_47140375的博客
03-09 781
哈喽哈喽 大家好，今天给大家分享一个vue的进阶课程。 在大部分的vue教学课程中，介绍的内容都比较基础，其实呢，那么基础的内容，我推进大家直接去vue官方站点看 文档就好，那里最权威，vue作者尤玉溪本身就是华裔，所以中文文档非常完善，如果您有html和js的基础知识，那直接去看官方文档，里面详细介绍了vue的各种特性，自己阅读文档是吸收效率最高的方式，看视频课程大脑容易分神。 vue官方教程https://cn.vuejs.org/v2/guide/ 本期课程主要是vue在实际项目中的一些进阶知.
Vue基础工程创建流程
风不知从何处起的小屋
12-09 80
配置好需要的环境vue vue-cli webpack 打开cmd 进入需要创建文件的路径 创建一个vue工程 vue init webpack 工程名 安装工程所需的依赖（在编译器中也可以下载，但是在编译器中下载，在使用时不会产生提示建议提前下载，方便使用） 跟着提示修改或者默认回车，vue-router、EsLint、unit tests 等等如果自己手动配置按N即可，也可以Y自...
Vue 2.0 页面刚启动时如何做路由的重定向？
有问题可关注公众号：前端研究院 后台输入问题回复
01-08 1858
如果不做重定向，页面就会空，比如刚打开时 url 是 localhost:8080，我希望能重定向到 Index 组件，即 localhost:8080/index，现在我是给 index 组件加了个别名 alias '/' 解决，是否可以用程序方式解决？ 因为我看之前 vue 1 别人的代码有这样写： router.redirect({ '*': '/index' }
vue-cli 工程目录结构介绍
学习记录
10-17 8598
请说出vue-cli工程中每个文件夹和文件的用处 注意：此问题千万不要只解释一下 src 文件夹下每个文件夹的作用。vue-cli目录结构：vue-cli目录解析： build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。 config ...
vue框架学习第四篇——解读 Vue 首页启动过程
dazhong2012的专栏
08-23 3798
前面我们已经学习了 vue 项目结构，这篇开始我们开始进行一个简单的项目，并学习 vue 路由知识。 所谓 vue 路由，实际上是指 vue项目中的页面跳转及连接配置。 一.初始 vue 项目入口 main.js 下面是我们构建项目自动生成的main.js文件，我们可以看到文件由两部分组成 1. 导入文件 主要导入 Vue的全局变量 ，router 路由，以及应用主组件 App.v...
vue-seamless-scroll使用方法
03-25
Vue-seamless-scroll是一个Vue.js的插件，用于创建无缝滚动的效果。使用方法如下： 1. 安装该插件： ``` npm install vue-seamless-scroll --save ``` 2. 在Vue工程的main.js中导入并注册该插件： ``` import ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值