1.由于vue项目依赖 node.js npm 需要先安装.   若没有请先安装,请百度

//检查是否有node.js  npm vue

win+r   输入cmd  输入node -v  回车 会出现node,js的版本

输入npm -v  回车 会出现npm的版本

输入vue -V 回车 会出现vue的版本

2.安装vue:
  1. npm install -g vue-cli
  2. //-g表示全局安装,vue-cli是模块,全局安装的模块可以在命令行直接使用

由于npm网站在国内速度非常慢,所以可以在命令后面加上淘宝的镜像

即:npm install -g vue-cli --registry=https://registry.npm.taobao.org
 
之后,可以vue --V查看vue是否安装好,出现版本号即安装成功。
3.接下来是创建项目框架
如果想放到指定的目录下,先进入这个目录在执行创建项目的命令
例如:           e:回车   //进入E盘                              cd test回车   //进入E盘的test文件夹
E:\test\vue init webpack my-vue          //创建一个基于"webpack"的项目,后面是项目名 
依次按照提示输入,项目名、项目描述、项目作者等等,
然后一路回车  看到最后这句项目就创建好了。
To get started:  就是告诉你接下来该做什么,依次完成下面3行命令就可以了。进入my-vue项目-----安装npm依赖-----运行项目
 
 
以下为此3步的详解
 
cd my-vue   
在my-vue文件下看到项目结构:
注:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的

 
 
4.安装项目依赖
生成了项目以后是不能直接运行的,现在很多项目都依赖许许多多的模块,需要逐一安装依赖。
ctrl+c 停掉刚生成项目的命令,cd my-vue 进入项目跟目录, 用命令npm install 安装
若安装缓慢同样可以使用淘宝镜像
即输入命令:npm install --registry=https://registry.npm.taobao.org
当这个命令运行完成以后会多出一个node_modules文件夹,里面就是项目所需的所有依赖
可以看到有很多模块,这些模块都是在package.json文件里定义好了的.
 
5.运行测试
  1. npm run dev
出现如下红色框框表示启动完成,一般流览器会自动跳转出界面http://localhost:8080/,也可以手动打开流览器器输 入地址。

使用vue2.0创建的项目的步骤的更多相关文章

  1. 【数据售卖平台】—— Vue2.0入门学习项目爬坑

    前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...

  2. .Net Core .Net Core V1.0 创建MVC项目

    .Net Core V1.0 创建MVC项目 创建MVC项目有两种方式: 一.创建Web项目:(有太多没用的东西要去删太麻烦) 2.项目目录结构: 此种方法要注意的是,会创建好多个json文件,下面就 ...

  3. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

  4. 使用Vue-cli3.0创建的项目,如何发布npm包

    使用Vue-cli3.0创建的项目,如何发布npm包 在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建ind ...

  5. 【HANA系列】SAP ECLIPSE中创建ABAP项目的步骤

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP ECLIPSE中创建AB ...

  6. vue2.0 创建项目

    准备 安装淘宝 npm镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 添加系统变量path的内容 因为cnpm会被安 ...

  7. sass创建web项目环境步骤

    1)npm创建web前端项目环境步骤 1.新建文件夹,在该文件下进入cmd控制台2.输入命令 npm init 回车3.name:名字只支持小写,不支持大写,将大写的名字改为小写即可4.version ...

  8. Vue2+Webpack创建vue项目

    相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...

  9. 使用SVN+Axure RP 8.0创建团队项目

    一.使用到的工具:VisualSVN Server --SVN服务器:https://www.visualsvn.com/server/ Axure RP 8.0  :http://www.downc ...

随机推荐

  1. HTML后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.内容回顾: HTML 一大堆的标签:块级.行内 CSS position background text-align mar ...

  2. Spring绑定请求参数过程以及使用@InitBinder来注册自己的属性处理器

    在工作中,经常会出现前台的请求参数由于无法被正常转型,导致请求无法进到后台的问题. 比如,我有一个User.其性别的属性被定义成了枚举,如下: public enum Gender { MALE(&q ...

  3. handlebars模板引擎使用初探1

    谈到handlebars,我们不禁产生疑问,为什么要使用这样的一个工具呢?它究竟能为我们带来什么样的好处?如何使用它呢? 一.handlebars可以干什么? 首先,我们来看一个案例: 有这样的htm ...

  4. 写代码?程序猿?你不能不懂的八大排序算法的Python实现

    信息获取后通常需要进行处理,处理后的信息其目的是便于人们的应用.信息处理方法有多种,通常由数据的排序,查找,插入,删除等操作.本章介绍几种简单的数据排序算法和高效的排序算法. 本章主要涉及到的知识点有 ...

  5. Codeforces 1291 Round #616 (Div. 2) C. Mind Control(超级详细)

    C. Mind Control You and your n−1 friends have found an array of integers a1,a2,-,an. You have decide ...

  6. P1459 三值的排序 Sorting a Three-Valued

    题目描述 排序是一种很频繁的计算任务.现在考虑最多只有三值的排序问题.一个实际的例子是,当我们给某项竞赛的优胜者按金银铜牌排序的时候.在这个任务中可能的值只有三种1,2和3.我们用交换的方法把他排成升 ...

  7. 经典卷积神经网络算法(1):LeNet-5

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  8. 网络流 I - Fox And Dinner CodeForces - 510E

    Fox Ciel is participating in a party in Prime Kingdom. There are n foxes there (include Fox Ciel). T ...

  9. 【FPGA篇章二】FPGA开发流程:详述每一环节的物理含义和实现目标

    欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 FPGA的开发流程是遵循着ASIC的开发流程发展的,发展到目前为止,FPGA的开发流程总体按照下图进行,有些步骤可能由于其在当前项目中的条件 ...

  10. 带你看看Java的锁(二)-Semaphore

    前言 简介 Semaphore 中文称信号量,它和ReentrantLock 有所区别,ReentrantLock是排他的,也就是只能允许一个线程拥有资源,Semaphore是共享的,它允许多个线程同 ...