从零开始,手把手交给你vue如何新建一个项目

vue创建项目(npm安装→初始化项目)

第一步npm安装

首先:先从nodejs.org中下载nodejs

 

图1

双击安装,在安装界面一直Next

图2

 

图3

 

图4

直到Finish完成安装。

打开控制命令行程序(CMD),检查是否正常

图5

使用淘宝NPM 镜像

大家都知道国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。

$  npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

这样就可以使用cnpm 命令来安装模块了:

 

第二步项目初始化

1.第一步:安装vue-cli

cnpm install vue-cli -g      //全局安装 vue-cli

图6

查看vue-cli是否成功,不能检查vue-cli,需要检查vue

图7

选定路径,新建vue项目,这里我是在桌面上新建了sun文件夹,cd目录路径

下面我一项目名为sell新建vue项目

vue init webpack  ”项目名称“

图8

现在已经创建好了,那就让项目先安装下依赖再运行一下,会出现下面的页面,操作指令是:

cnpm install

cnpm run dev

注意 这里要在sell下进行安装和运行哦!!!

图9

啦啦啦  安装成功。

图10

利用vue-cil初始化构建vue项目,我们会获得一个初始化的文件夹结构,如下:

 

图11

下面开始进入你的vue之旅吧!!

https://cn.vuejs.org/                    //官网才是开始的必经之路。。。。


文章来源:https://www.jianshu.com/p/02b12c600c7b

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/473267.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数学图形(1.33) 棕子曲线

#http://www.mathcurve.com/courbes2d/vasques/vasques.shtml vertices 10000 t from 0 to (8*PI) a rand_int2(1, 30) b rand_int2(1, 4) n 8 x cos(n*t - t)*cos(n*t) y cos(n*t)^2 a 10 x x*a y y*a 相关软件参见:数学图形可视化工具,使用自己定义语法的脚本代码生…

LeetCode 1278. 分割回文串 III(区间DP)

文章目录1. 题目2. 解题1. 题目 给你一个由小写字母组成的字符串 s,和一个整数 k。 请你按下面的要求分割字符串: 首先,你可以将 s 中的部分字符修改为其他的小写英文字母。接着,你需要把 s 分割成 k 个非空且不相交的子串&…

原生态HTML文件上传与下载

文件下载 传统的文件下载有两种方法&#xff1a; 使用<a/>标签&#xff0c;href属性直接连接到服务器的文件路径window.location.href"url" 这两种方法效果一样。但有个很大的问题&#xff0c;如果下载出现异常&#xff08;连接路径失效、文件不存在、网络问…

Jquery 常用总结

获取元素的宽度: 如果用$(ele).attr("width")获取的值不带px 如果用$(ele).css("width")获取的值带px //获取鼠标坐标 $(function() { $("#Button2").click(function(event) { alert(event.p…

LeetCode 1187. 使数组严格递增(DP)*

文章目录1. 题目2. 解题1. 题目 给你两个整数数组 arr1 和 arr2&#xff0c;返回使 arr1 严格递增所需要的最小「操作」数&#xff08;可能为 0&#xff09;。 每一步「操作」中&#xff0c;你可以分别从 arr1 和 arr2 中各选出一个索引&#xff0c;分别为 i 和 j&#xff0c…

用Python进行屏幕截图,只用两行代码搞定

一、计算机中如何进行屏幕截图呢&#xff1f; 1、全屏截图 按下键盘中的‘PRTSC’或者‘Print Screen’键&#xff0c;即可实现全屏截图&#xff08;不同键盘位置和名称可能不同&#xff09;。此时&#xff0c;并不能看到效果&#xff0c;只是将截图保存在粘贴板中&#xff0…

POJ 2075 Tangled in Cables (c++/java)

http://poj.org/problem?id2075 题目大意&#xff1a; 给你一些人名&#xff0c;然后给你n条连接这些人名所拥有的房子的路&#xff0c;求用最小的代价求连接这些房子的花费是否满足要求。 思路&#xff1a; 昨天20分钟的题&#xff0c;输入不小心写错了- -|||||看世界杯半场休…

利用nginx建立windows软连,实现IP访问文件

一、运行nginx 1、首先下载nginx&#xff0c;下载地址&#xff1a;https://www.lanzous.com/ianm7tg 2、解压文件如图&#xff1a; 3、运行nginx.exe&#xff0c;浏览器运行电脑ip地址&#xff0c;如图&#xff1a; 二、cmd管理员权限 运行中输入“cmd”&#xff0c;按住shi…

LeetCode 1263. 推箱子(BFS+DFS / 自定义哈希set)

文章目录1. 题目2. 解题2.1 超时解2.2 BFS DFS1. 题目 「推箱子」是一款风靡全球的益智小游戏&#xff0c;玩家需要将箱子推到仓库中的目标位置。 游戏地图用大小为 n * m 的网格 grid 表示&#xff0c;其中每个元素可以是墙、地板或者是箱子。 现在你将作为玩家参与游戏&a…

深入浅出Java回调机制

前几天看了一下Spring的部分源码&#xff0c;发现回调机制被大量使用&#xff0c;觉得有必要把Java回调机制的理解归纳总结一下&#xff0c;以方便在研究类似于Spring源码这样的代码时能更加得心应手。 注&#xff1a;本文不想扯很多拗口的话来充场面&#xff0c;我的目的是希望…

前端:实现div等块元素添加X轴滚动显示(Y轴不滚动)

一、建立外盒子与内盒子 原生态代码&#xff1a; <div class"tol_dev"><div class"dev_li"></div><div class"dev_li"></div><div class"dev_li"></div><div class"dev_li"…

2020年学习总结

文章目录1. CSDN 博客数据2. 基础算法练习3. 机器学习4. 深度学习5. MySQL6. 总结和展望时间过得很快&#xff0c;2020结束了&#xff01; 写个流水账&#xff0c;记录一下。 1. CSDN 博客数据 截个图对比下&#xff1a; 2019年终2020年终 2. 基础算法练习 LeetCode 刷题 …

npm全局环境变量配置及解决VsCode使用时遇到的问题

一、npm全局环境变量配置 1、我们要先配置npm的全局模块的存放路径以及cache的路径 例如我希望将以上两个文件夹放在NodeJS的主目录下&#xff0c;便在NodeJs下建立”node_global”及”node_cache”两个文件夹。如下图 2、cmd 中输入如下命令 npm config set prefix “d:\no…

Android菜鸟如何学习Android系统开发?

如何做好Android学习前的准备? 如果你已经确定了学习Android的目标&#xff0c;那么&#xff0c;应该提前做好哪些工作、先打下哪些基础呢? 首先&#xff0c;你最好先熟悉一门编程语言&#xff0c;现在大学里面和计算机相关的专业甚至理工类专业一般都会开设C语言课程&#x…

关于Django中JsonResponse返回中文字典编码错误的解决方案

遇到这样一个问题&#xff0c;返回的json不是中文 def get_json(request):return JsonResponse({"res": "成功"}) 结果&#xff1a; {"res": "\u6210\u529f"} 解决方案&#xff1a;JsonResponse(data, json_dumps_params{ensure_a…

LeetCode 668. 乘法表中第k小的数(二分查找)

文章目录1. 题目2. 解题1. 题目 几乎每一个人都用 乘法表。但是你能在乘法表中快速找到第k小的数字吗&#xff1f; 给定高度m 、宽度n 的一张 m * n的乘法表&#xff0c;以及正整数k&#xff0c;你需要返回表中第k 小的数字。 例 1&#xff1a; 输入: m 3, n 3, k 5 输出…

获取类类型

//获得类类型的两种方式 1、 Class cls1 Role.class; 2、 Class cls2 Class.forName("yui.Role"); 注意第二种方式中&#xff0c;forName中的参数一定是完整的类名&#xff08;包名类名&#xff09;&#xff0c;并且这个方法需要捕获异常。 现在得到cl…

VUE:解决判断网页端与手机端情况下,横竖屏无法判断的问题

一、需求&#xff1a; 第一步&#xff1a;判断是网页端还是手机端 第二步&#xff1a;判断手机端&#xff0c;手机是横屏显示还是竖屏显示 二、解决方法&#xff1a; 监听网页端还是手机端 监听显示页面宽高变化 三、代码如下&#xff1a; methods: {_isMobile() {let f…

天池 在线编程 寻找比周围都大的点(模拟)

文章目录1. 题目2. 解题1. 题目 https://tianchi.aliyun.com/oj/245679029019779851/254275128279634587 给一个n*m大小的矩阵&#xff0c;寻找矩阵中所有比邻居&#xff08;上下左右&#xff0c;对角也算&#xff0c;不考虑边界就是8个咯&#xff09;都严格大的点。 返回一个…

前端笔试题总结---持续更新

写在前面&#xff1a;。。。。 1字符串逆序 function reverse(str){return str.split("").reverse().join("");//直接用函数var str1"";//从后向前输出for(var istr.length-1;i>0;i--){str1str[i];}return str1;var lenstr.length;//字符串原…