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. ubuntu 下 使用GTK+、sqlite3、c语言的学生系统

    使用GTK+2.0.sqlite3数据库.c语言 的简易的学生管理系统 实现了基本的增删查改 效果图:

  2. 【深入AQS原理】我画了35张图就是为了让你深入 AQS

    申明 本文首发自公众号:程序员cxuan,此文章为本人投稿文章.已经和cxuan沟通,文章投递公众号,博客平台我自己发布可标记为原创. 此文章肝了很久,图片较多,希望大家喜欢. 另外,感兴趣的小伙伴可 ...

  3. c语言----实战植物大战僵尸

    1. 原理 通过指针先找到阳光的地址,然后修改地址对应的值即修改阳光值. 2. 工具 CheatEngine  --- 查询进程中变量的地址 Dll注入工具  -----  注入 VS2017 3. ...

  4. Django中修改DATABASES后,执行python manage.py ****报错!UnicodeEncodeError

    Django中修改DATABASES后,执行python manage.py ****报错!UnicodeEncodeError: 'latin-1' codec can't encode chara ...

  5. 开发AI+诊疗生发系统,「先锋汇美」借力人工智能辅助诊疗实现头皮医学检测...

    困扰年轻人的脱发问题萌生了新兴的产业链.36氪先前曾剖析过近来火热的植发市场,更多人则选择"防范于未然","头皮检测"服务备受关注.此前,人们对"头皮 ...

  6. 线程状态及各状态下与锁和CPU的关系

    线程的状态 Thread.State枚举类型中定义了线程的六种状态:NEW,RUNNABLE,BLOCKED,WAITING,TIMED_WAITING和TERMINATED. 线程在某一时刻只能拥有 ...

  7. JS点击按钮,提示确认后跳转网页,并可传递参数

    综合参考: http://jingyan.baidu.com/article/47a29f242b180ac0142399f9.html http://blog.csdn.net/hshl1214/a ...

  8. C语言编程入门题目--No.15

    题目:利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示, 60分以下的用C表示. 1.程序分析:(a>b)?a:b这是条件运算符的基本例子. 2 ...

  9. C语言程序设计实验报告四

    C程序设计实验报告 姓 名:赖瑾 实验地点:家 实验时间:2020年4月9日 实验项目:5.3.1练习2 求数列的前n项和 5.3.2练习2 求水仙花数 5.3.4 十进制转换 5.3.5练习1 百马 ...

  10. Excel 函数 常见错误

    excel公式出错的值. 常见错误值类型: #N/A #VALUE! #NAME? #REF! #NUM! #NULL! #N/A 找不到指定内容,比如查找根本不存在的内容,便显示该错误值 比如在使用 ...