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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

创建第一个vue工程的更多相关文章

  1. Go入门:创建第一个Go工程

    前言 我是一名iOS开发. 因为公司后台都用的Go. 因为对服务端不了解. 所以想自己学习学习. 环境 因为自己的电脑是mac.然后在阿里云买的是centOS的服务器. 所以下面搭建的环境都是在cen ...

  2. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

  3. 创建第一个vue实例

    一.vue安装与下载 1. 官网下载  下载地址 选择开发版本 2. 打开sublime,新建vue文件夹,将下载好的代码vue.js放入vue文件夹中. 3. 新建index.html文件,在hea ...

  4. 利用IntelliJ IDEA创建第一个Groovy工程

    因为某些原因,需要学习一下Groovy.关于Groovy的入门教程请看这篇文章http://www.ibm.com/developerworks/cn/education/java/j-groovy/ ...

  5. 2-1 创建第一个Vue实例

    https://cn.vuejs.org/ 生产版本是经过压缩后的版本,它里面把一些没用的警告的代码删除掉了所以它会更精悍一些. 直接引入CDN的网址我们就可以使用Vuejs了.使用生产版本或者CDN ...

  6. 一步步创建第一个Vue项目

    写在了GitHub https://github.com/TaoPanfeng/vue-cms 1 初始化 创建一个文件夹 vue-cms 在vue-cms目录下创建文件 package.json 在 ...

  7. 创建第一个Hiberntae工程

    一.前言 很久之前已经对Hibernate有所了解,在项目中进行过简单的应用,基本了解hibernate的简单应用,没有深入的了解,来Shine公司快三个月了,公司的ORM框架就是用Hiberante ...

  8. 终于用scons创建了一个MDK工程

    这几天我在学着怎么使用RT-Thread.起初只想用一下里面的RTGUI,却一直没成功,功力实在不行啊. RT-Thread用了scons来创建工程,似乎还能编译,还有很多可配置项,很是方便.于是我想 ...

  9. 如何运行一个vue工程

    在师兄的推荐下入坑vue.js ,发现不知如何运行GitHub上的开源项目,很尴尬.通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家.   首先, ...

随机推荐

  1. mongodb 降序

    降序排序 db.mycol.find({},{,_id:}).sort({})// 1用于升序排列,而-1用于降序. 示例代码: var user = await Kitten.find({ type ...

  2. Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法、编程步骤、缓存问题、乱码问题

    目录 1 什么是ajax 2 获取ajax对象 3 ajax对象的属性和方法 4 使用ajax的编程步骤 5 缓存问题 6 乱码问题 1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是 ...

  3. 20行核心代码:jQuery实现省市二级联动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Opencv读取图片像素值并保存为txt文件

    #include <opencv2/opencv.hpp>#include<vector>#include <fstream> using namespace st ...

  5. IFC数据模型在三维引擎中模拟

  6. acrord32 pdf自动化

    这个东西就是帮助用户自动化处理pdf的 . 可以看作是adobe reader的命令行

  7. p2234&bzoj1588 营业额统计

    传送门 题目 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额 ...

  8. LeetCode第111题:二叉树的最小深度

    问题描述 给定一个二叉树,找出其最小深度. 最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明: 叶子节点是指没有子节点的节点. 示例: 给定二叉树 [3,9,20,null,null,1 ...

  9. Spring Boot 学习系列(05)—自定义视图解析规则

    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 自定义视图解析 在默认情况下Spring Boot 的MVC框架使用的视图解析ViewResolver类是C ...

  10. Metasploit 读书笔记-神器Meterpreter

    一、基本命令 截屏 screenshot 2.获取系统平台信息 sysinfo 3.进程信息 ps 4.获取键盘记录 查看进程信息ps--migrate将会话迁移至explorer.exe进程空间中- ...