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. vue2.x学习笔记(三十)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12682902.html. 状态管理 类Flux状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中, ...

  2. 移动端上传图片(引入exif-js,图片被压缩为base64)

    <template> <div class="vue-box"> <img :src="imgUrl" alt="&qu ...

  3. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  4. Character Array and Character Pointer

    最近复习数据结构实验时,碰到这么一行代码,看的有点不爽. typedef char** HuffmanCode; 借此梳理下数组和指针. int* p; //指针变量p中存的地址代表的内存单元中的数据 ...

  5. Codeforce-CodeCraft-20 (Div. 2)-B. String Modification (找规律+模拟)

    Vasya has a string s of length n. He decides to make the following modification to the string: Pick ...

  6. CF思维联系–CodeForces - 225C. Barcode(二路动态规划)

    ACM思维题训练集合 Desciption You've got an n × m pixel picture. Each pixel can be white or black. Your task ...

  7. [USACO1.5]回文质数 Prime Palindromes

    题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围[a,b](5 <= a < b <= 100,000 ...

  8. P6474 [NOI Online #2 入门组] 荆轲刺秦王

    P6474 [NOI Online #2 入门组] 荆轲刺秦王 bfs+差分+卡常 本来我其实是场内选手,但是因为记错提交时间,晚了半小时才交,交不上了,就自动降级为了场外选手 题面复杂,不简述了 首 ...

  9. 惠普 HP Pavilion 15 Notebook PC清灰教程总结 惠普g4系列清灰加内存条教程

    最近天气热的电脑都受不了,风扇总是异响,声音很大,感觉是散热不行了,就把电脑清一下灰,虽然之前也清过,但是基本都忘记了,机子比较老,找不到具体教程,清灰过程中因为不熟悉有点费劲,手动记录一下,方便下次 ...

  10. P2308 添加括号(dfs记录dp路径)

    传送门 \(一看肯定是区间DP(因为和和合并石子很相似,都要加n-1次)\) \(转移方程为(其中he[i][j]是i到j的和)\) \[dp[i][j]=min(dp[i][j],dp[i][k]+ ...