vue.js2.0:如何搭建开发环境及构建项目

1,安装node.js

Node.js官网:https://nodejs.org/en/

进入Node.js官网,选择下载并安装Node.js。安装过程只需要点击“下一步”即可,

如下图,非常简单。

验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口。

输入node -v即可得到对应的Node.js版本。

npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm。
输入npm -v可得到npm的版本。

注意npm的版本需要在3.0.0以上版本,所以,如果npm的版本小于3.0.0,输入以下命令更新npm至最新版本。

npm -g install npm

2,安装cnpm

建议使用npm的国内淘宝镜像cnpm 命令行工具代替默认的npm。

在命令行中输入以下内容等待安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

3,cpnm全局安装vue-cli

在命令行中运行以下命令然后等待安装

cnpm install -g vue-cli

构建项目

新建项目

在这里我将vue项目建在f盘的vueProjiects文件夹下,利用命令进入此目录。

在cmd中输入盘符f:回车即可进入F盘:

输入命令 cd vueProjects跳到此目录下:

在此目录下创建一个基于 webpack 模板的新项目,即在cmd中输入以下命令:

vue init webpack my-vue-project

vue init webpack my-vue-project意思是初始化一个项目,利用的是webpack打包和压缩,此项目命名为my-vue-project。

这样,my-vue-project文件夹就自动生成刚刚在指定的目录中,在此过程中,需要输入项目名、描述、作者等。

打开my-vue-project文件夹,项目文件如下:

安装项目依赖

在cmd中,注意需要使用命令先定位到my-vue-project目录下,

然后输入命令cnpm install安装项目所需的依赖包资源

cnpm install

可以看到my-vue-project文件夹下多了一个node_modules文件

运行项目

使用命令npm run dev 运行项目

npm run dev

项目运行成功后浏览器会自动打开localhost:8080呈现以下页面:

至此,vue的脚手架工具已经搭建完成,接下来具体项目的开发只需在src目录下进行。

时间: 2024-11-13 03:40:28

vue.js2.0:如何搭建开发环境及构建项目的相关文章

vue.js:搭建开发环境及构建项目

发环境的搭建 安装node.js 直接下一步就好, 注意安装的位置 Node.js官网:https://nodejs.org/en/ 验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口.输入node -v即可得到对应的Node.js版本. npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm. 输入npm -v可得到npm的版本. 注意npm的版本需要在3.0.0以上版本,所以,如果npm的版本小于3.0.0

第0课 - 搭建开发环境之安装QT

第0课 - 搭建开发环境之安装Qt 1. 课程学习的原材料 - Visual Studio 2010 - Qt SDK 4.7.4 - Qt Creator 2.4.1 2. Visual Studio 2010 (1)用于学习 Windows 上 GUI 程序设计的原理 (2)体会使用 C/C++ 编写 GUI 窗口应用程序 (3)展现 Qt 对于 Windows 窗口开发的面向对象封装 3. Qt SDK 与 Qt Creator - Qt SDK 为 Qt 开发提供必要的类和函数,以及相关

3、Cocos2dx 3.0游戏开发找小三之搭建开发环境

尊重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27107295 搭建开发环境 使用 Cocos2d-x 的一个非常大便利之处在于,我们能够在 PC 或 Mac 环境下完毕编码和大部分的调试,然后再迁移到其它设备 上做实际环境測试.这意味着我们能够在 PC 上开发游戏.然后以极其低廉的成本把游戏迁移到 iOS 或其它平台上,从而节 省了开发阶段支付在设备方面的很多费用. 前面提到,Cocos2d-x

SDL2.0的VS开发环境搭建

SDL2.0的VS开发环境搭建 [前言] 我是用的是VS2012,VS的版本应该大致一样. [开发环境搭建] >>>SDL2.0开发环境配置:1.从www.libsdl.org 下载SDL2.0开发工具,主要是include头文件目录及编译好的lib和dll文件,并解压:2.打开VS2012,新建空白工程:3.添加头文件路径.在工程上点击右键-->属性-->C/C++-->附加包含路径,输入1中解压的头文件路径(注意,需要先在工程中添加一个C或者C++的文件):4.添加

Cocos2dx-3.0版本 从开发环境搭建(Win32)到项目移植Android平台过程详解

作为重量级的跨平台开发的游戏引擎,Cocos2d-x在现今的手游开发领域占有重要地位.那么问题来了,作为Cocos2dx的学习者,它的可移植特性我们就需要掌握,要不然总觉得少一门技能.然而这个时候各种各样的问题也就来了,之前网上一直有零零碎碎的移植教程,但是都不完整,或是有这样或者那样的问题.今天刚刚研究成功了Cocos2dx-3.0版本项目的安卓平台移植问题,本人亲自完成了整个过程,将Cocos2dx-3.0版本 从开发环境搭建(Win32)到项目移植Android平台过程 一起分享给大家.

从0系统学Android--1.2 手把手带你搭建开发环境

要想进行程序开发,首先我们需要搭建开发环境,下面就开始搭建环境. 1.2.1 所需的工具 首先 Android 开发是基于 Java 的,因此你需要掌握简单的 Java 语法.会基础的 Java 语法就可以开始. JDK Java 语言的开发工具包,包含了 Java 的运行环境.工具集合.基础类库等 Android SDK Android 的开发工具包,我们进行 Android 开发离不开这个工具包 Android Studio Android Studio 就是我们的开发软件(写代码用的软件)

Linux程序设计(搭建开发环境--curses)

看官们,咱们今天要说的内容,是前面内容的一点小补充,具体的内容是:安装curses开发包,以搭建 开发环境.闲话休说,言归正转. 我们在前面说过搭建开发环境的内容,主要说了开发环境中的GCC和VIM,今天咱们会说如何搭建开发环境 中的另外一个工具:curses. curses是Linux上的一个图形库,不过我们使用的Mint只安装了库文件,没有安装与该库相关的头文件.没 有这些头文件,就不能进行相关的开发工作.因此,如果我们想使用Linux开发一些简单的图形软件的话,就 需要安装与该相关的头文件

Hadoop学习笔记(4) ——搭建开发环境及编写Hello World

Hadoop学习笔记(4) ——搭建开发环境及编写Hello World 整个Hadoop是基于Java开发的,所以要开发Hadoop相应的程序就得用JAVA.在linux下开发JAVA还数eclipse方便. 下载 进入官网:http://eclipse.org/downloads/. 找到相应的版本进行下载,我这里用的是eclipse-SDK-3.7.1-linux-gtk版本. 解压 下载下来一般是tar.gz文件,运行: $tar -zxvf eclipse-SDK-3.7.1-linu

Win10 IoT C#开发 1 - Raspberry安装IoT系统及搭建开发环境

原文:Win10 IoT C#开发 1 - Raspberry安装IoT系统及搭建开发环境 Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架构上运行. The Raspberry Pi Foundation 是英国一个致力于科技推广的慈善组织,为广发爱好者和DIY科技迷开发了搭载ARM架构处理器的 mini 电脑 Raspberry Pi 并获得了成功.而微软最新发