首先,列出来我们需要的东西:  
  • node.js环境(npm包管理器)
  • vue-cli 脚手架构建工具
  • cnpm  npm的淘宝镜像
 
安装node.js
node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。
 
安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。
 

npm包管理器,是集成在node中的,所以,直接输入 npm -v就会如下图所示,显示出npm的版本信息。

OK!node环境已经安装完成,npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm。

安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待,安装完成如下图。
 
 
完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网
 

安装vue-cli脚手架构建工具

在命令行中运行命令 cnpm install -g vue-cli ,然后等待安装完成。(注意,这里使用cnpm来替代npm,不然速度超级慢,会导致卡在那)
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

用vue-cli构建项目

要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择桌面来存放新建的项目,则我们需要先把目录cd到桌面,如下图。
 
 
在桌面目录下,在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在桌面生成该文件夹),如下图。
 
 
运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。
 
 
打开firstVue文件夹,项目文件如下所示。
 
 
这就是整个项目的目录结构,其中,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装,如下图。
 
 

安装项目所需的依赖

要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install ,等待安装。
 
 
安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。
 
 
安装完依赖包之后,就可以运行整个项目了。
 

运行项目

在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
 
 
这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。
 
项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。
 
 
如果看到这个页面,说明项目运行成功了。

如何运行vue项目的更多相关文章

  1. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  2. 零基础 Vue 开发环境搭建 打开运行Vue项目

    [相关推荐]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 所需文件 node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0) cnpm ...

  3. 解决运行vue项目的报错This relative module was not found:

    运行vue项目出现这样的报错. This relative module was not found: * ../../assets/img/spot.png !./src/components/on ...

  4. 在运行vue项目时,执行npm install报错小记

    在运行vue项目时,执行npm install 报错,导致后续的执行报各种错误,根据报错,尝试了网上的各种办法,最后发现时网络问题下载失败导致,解决办法: 安装cnpm==>npm instal ...

  5. 不用终端运行 Vue项目 基于Pycharm

    不用终端运行 Vue项目 基于Pycharm 如下图展示 接下来 然后单击右上角运行 即可完成运行

  6. 如何使用Vue-cli搭建和运行vue项目

    此文章  主要参考:https://jingyan.baidu.com/article/5225f26bbb430fe6fa0908ce.html 在vue init webpack my-proje ...

  7. 本地运行vue项目webpack提示 Compiled successfully

    最近在github下载运行别人的vue项目后,如下图提示编译成功,但项目并没有启动       最开始我以为是端口问题,修改了config-index.js里的port端口,重新运行后依然是上图提示 ...

  8. vue的学习--如何使用Intellij IDEA配置并运行vue项目

    重新接触vue,开始学习使用IDE对vue项目进行配置和运行项目. 1.前面的准备 一般的教程都能到通过命令行运行npm run dev,并通过结果显示的端口,用浏览器访问自己的vue项目的结果.但是 ...

  9. 使用WebStorm运行vue项目

    在WebStorm中怎么打开一个已有的项目,这个不用多说,那么如何运行一个vue项目呢? 1.点击下图中右上角的红框. 2.在出现的弹框中选中左上角“+”下的“npm”,如下图所示. 3.选中第二步的 ...

随机推荐

  1. 使用SecureCRT的SFTP在WINDOWS与LINUX之间传输文件(转载)

    参考文献: http://ice-k.iteye.com/blog/1068275 http://www.cnblogs.com/chen1987lei/archive/2010/11/26/1888 ...

  2. javascript学习(一)构建自己的JS库

    库是一个饱受争议的热门话题.一种观点认为它是一种非常棒的工具,是任何开发者都不可或缺的:另一种观点则认为在不理解库的内部工作原理的情况下对库形成依赖,会助长懒惰的风气从而导致开发者素质下降 库是一个饱 ...

  3. javascript初学者必须注意的7个细节

    [IT168 技术]每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的.本文列举Java ...

  4. 基于 HTML5 Canvas 的工控机柜 U 位动态管理

    前言 U 是一种表示服务器外部尺寸的单位,是 unit 的缩略语,详细的尺寸由作为业界团体的美国电子工业协会(EIA)所决定.之所以要规定服务器的尺寸,是为了使服务器保持适当的尺寸以便放在铁质或铝质的 ...

  5. Mybatis 系列6

    上篇系列5中 简单看了一下TypeHandler, 本次将结束对于mybatis的配置文件的学习, 本次涉及到剩下没提及到的几个节点的配置:objectFactory.databaseIdProvid ...

  6. Django 2.0 Release note阅读简记

    最前面就是大家都知道的这个版本开始只支持py3.4+,而且下一个大版本就不支持3.4,再就是建议所有插件开始放弃1.11 1.最惊艳的变化,就是URL配置正则表达式的简化,旧的: url(r'^art ...

  7. 爬虫初探--PHP

    我有收藏的cms网站,偶尔会下载一些资源,老司机都懂的:-D.然后有一次好几天没上,堆了好些没弄,心想:cao,这好麻烦啊,能不能写个脚本自动帮我搞?然后忽然就想到,这是不是就是所谓的爬虫呢?心中一阵 ...

  8. php根据地球上任意两点的经纬度计算两点间的距离 原理

    地球是一个近乎标准的椭球体,它的赤道半径为6378.140千米,极半径为6356.755千米,平均半径6371.004千米.如果我们假设地球是一个完美的球体,那么它的半径就是地球的平均半径,记为R.如 ...

  9. UED团队规范设计参考及建议

    公司产品线逐渐增多,变动频繁且并行开发,常常需要设计与开发能够快速的做出响应.同时这类产品中有存在很多类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容.通过模块化的解决方案,降低冗余的生产 ...

  10. Spring Boot实战笔记(九)-- Spring高级话题(组合注解与元注解)

    一.组合注解与元注解 从Spring 2开始,为了响应JDK 1.5推出的注解功能,Spring开始大量加入注解来替代xml配置.Spring的注解主要用来配置注入Bean,切面相关配置(@Trans ...