vue框架的创建最新版


前言

好久没有看vue框架的概念了,在很早之前有略微的涉及,后来摆烂了一段时间,就没有掌握了,现在重新来看下vue框架,因为差不多忘光了不,o(╥﹏╥)o不喜欢请不要伤害仅代表自己个人的一些见解。


一、vue框架是什么?

什么是vue,用最简单的人话来说就是为了实现前后端分离的开发理念,开发前端 SPA(single page web application) 项目,实现数据绑定,路由配置,项目编译打包等一系列工作的技术框架。而且因为追求高聚合,低耦合的概念,vue框架越来越被推崇,保不齐后来还有更多的框架后来居上。

二、如何创建

1.下载node.js

网址在这里https://nodejs.org/en/,然后你复制下进去,点击几下就OK了
在这里插入图片描述
注意根据系统型号进行选择,应该不会下错,实在不行掏出有道词典,边翻译边下载,应该没有多大问题。

三、下载vue框架

首先安装镜像
按win+r 调出框输入cmd打开命令行
完成了这之后
基于node.js安装淘宝镜像
输入npm install -g cnpm --registry=https://registry.npm.taobao.org
(这是基于淘宝镜像因为这个下载速度特别快,如果直接下载没有梯子根本动不了)
下载完之后下载脚手架(普及一下概念什么是脚手架,用我的意思理解就是骨架,有了这个之后你只要往里面填东西就行,当然也可以删东西,但有些不能删除哦)
在命令行输入
npm install -g @vue/cli
(建议不要用cnpm install --global vue-cli,总之后续会出现各种各样的错误),耐心等待这些东西下载完
输入vue,验证是否成功如果出现这个
在这里插入图片描述
说明成功,可以看下有很多命令和选项。

最后如何创建vue项目

首先还是老样子打开命令行,但是你没换过位置的情况下,请不要直接在命令行里面创建项目,这样会增加运行盘的负担,影响自己系统性能吃力不讨好,如果可以的情况下,可以跟着我做(记住一定要在命令行里敲哦)

// 首先打开D盘 
D:
// 打开D盘中有个叫work web 的文件夹
cd D:\work web
//创建vue项目
vue create 项目名

在这里插入图片描述
可以看到有三个选项,上面那个不用管意思是我的版本不是最新的可以敲底下命令进行更新,不要默认创建哦,不要默认创建哦,不要默认创建哦,重要的话说三遍因为默认创建的话不会有router这个文件,会很烦,你手动创建能很大程度避免这个问题所以选择第三个,创建项目
下面你会遇到
在这里插入图片描述
自己选一下记得把要的选上,按空格进行选择,然后按回车接着往下走
在这里插入图片描述
然后选择版本号建议2.x,别问为什么,问就是出问题网上找答案快,3.x有些问题可能找不到,就是能找到也会花费大量的精力。然后下一步,然后是拼手速的时候,回车一定要按得快,连按两下,你可以快速的来到如下的界面
在这里插入图片描述
选择第三个接着往下按,为什么按第三个呢因为中庸之道,肯定是选择标准的实施对吧,然后在按下回车来到如下页面,注意是再按下回车
在这里插入图片描述
这个的话你看着选,小项目直接走第二个,大项目或是方便自己找毛病选择第一个,我的话一般都喜欢选择第一个。然后回车按得快直接到项目安装环节,等待项目安装完成,如果报错显示安装不成功,关了电脑重启下,
在这里插入图片描述
弹出这个就代表安装好了,接下来测试下,你把它提示的代码放入命令行敲击一下,依次输入上述的命令行,我的就是cd huyj
npm run serve
在这里插入图片描述
当你看到上述图片的时候,就代表运行的差不多了,
然后在浏览器输入
http://localhost:8080/
端口号你就可以看到
在这里插入图片描述
这个就代表创建成功了,这就是一个完整的vue创建过程,可能不大规范,欢迎指正。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值