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,输入以下命令更新npm至最新版本。

npm -g install npm

安装cnpm

由于资源的限制,安装npm依赖包的时候经常失败,建议使用npm的国内镜像cnpm 命令行工具代替默认的npm。

npm 国内镜像 https://npm.taobao.org/

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

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

cpnm全局安装vue-cli

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

cnpm install -g vue-cli

构建项目

新建项目

在这里我将vue项目建在D盘的demo文件夹下,利用命令进入此目录。在cmd中输入盘符D:回车即可进入D盘:

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

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

vue init webpack myvuedemo

上面一步完成之后输入:

cd myvuedemo

进入项目之后安装

npm install

最后 --  跑起来

成功!

然后自动弹出页面 , 若没有弹出,手动输入

http://localhost:8080

成功! 皆大欢喜!

注:

第一个是进入myvuedemo 文件夹
第二局是安装所需要的以来 就是pageckage.json里面的。 你是用npm install * --save 就会保存在这json里面 你下次发给别人的时候 就可以把node_module 不发送出去(因为很大) 然后别人在npm install 就可以直接安装组件
npm run dev这是一个自定义命令 也是在package.json里面进行修改的

这些就是命令 npm run dev ,  npm run start.  npm run build. npm run unit

你也可以将它写入全局, 以后直接在命令行里面直接dev xxx

就像你的npm install * 一样 像npm一样在任何一个角落用

时间: 2024-08-01 22:31:58

vue.js:搭建开发环境及构建项目的相关文章

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的版本. 注

基于webpack和vue.js搭建开发环境

前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理……不忍直视2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的……3.数据的渲染使用模板引擎,这就意味着你要

应用一:Vue之搭建开发环境

简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址https://nodejs.org/en/.安装完成之后以管理员身份运行cmd, 输入node -v,查看node版本号,出现版本号则说明安装成功. 2.安装淘宝npm镜像 由于npm是国外的使用速度较慢,所以我们需要安装使用淘宝的cnpm镜像命令来管理工具.安装命令如下: npm install -g cnpm –-registry=https://registry

Vue.js:使用vue-cli快速构建项目

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先安装了vue和webpack,不知道怎么安装的可以看我之前的文章<Vue + Webpack 实现SPA应用文档> 安装vue-cli npm install -g vue-cli                       //全局安装vue-cli vue init webpack projectName        //生成项目名

vue windows搭建开发环境

系统要求: win10 64位 淘宝镜像:https://registry.npm.taobao.org 根路径:我的默认为 D:\ 以下安装我默认node安装目录为node-install , 百度出来的一般安装文件夹为nodejs ,请按照自己要求自己更改 一:windows安装node 和 npm node.js官网下载windows版本node安装包,点击安装 安装时选择安装路径为 根路径\node-install 安装完成后,通过cmd进入dos命令窗口,执行 node -v , np

从零构建vue项目(一)--搭建node环境,拉取项目模板

本文是基于vuecli2搭建的项目. 1. 下载安装nodejs     地址:https://nodejs.org/en/download/ 选择安装版windows .msi, 不要选择压缩版 下载完成后,下一步-->下一步-->安装完成 npm:  node pageage mangemen node.js的包管理器, 集成到node.js中了. 验证node是否安装成功: 打开命令行(windows)或终端(mac),在命令行(终端)中输入: node -v 如果提示出版本信息则说明n

《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记

近期想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序.所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴请參考:<Node.js入门>CentOS 6.5下Node.js Web开发环境搭建笔记 Node.js是什么? 我们看看百科里怎么说的? JavaScript是一种执行在浏览器的脚本,它简单,轻巧.易于编辑,这样的脚本通经常使用于浏览器的前端编程.可是一位开发人员Ryan有一天发现这样的前端式

【.NET Core项目实战-统一认证平台】基于jackcao博客使用VSCode开发及感悟One搭建开发环境

原博客系列文章链接:https://www.cnblogs.com/jackcao/ 金焰的世界 感谢博主无私的奉献,感谢博主幼儿班的教学 基于jackcao博客使用VsCode开发及感悟One搭建开发环境 进入正文,原博主的文章适用于有一定基础的人,因此对于新手来说不算友好.因此此系列文章围绕如何搭建开发环境,如何跟着博主一步一步去学习理解这个平台. 很多初学者看着这一大堆东西,无从下手,遂从入门到放弃.我就从最简单的如何在windows上最小化开发开始,希望大家同我一起从入门到深入. 我的环

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

引言 简单介绍一下Cordova的来历,Cordova的前身 叫PhoneGap,自被Adobe收购后交由Apache管理,并将其核心功能开源改名为Cordova.它能让你使用HTML5轻松调用本地API接 口和发布应用到商店的应用开发平台.有低成本,低开发周期,轻量化等优点.它统一封装了 Andriod,IOS,WindowsPhone,Symbian等几大移动开发平台的API,采用HTML5+JavaScript的混合开发的模式 来开发智能移动的APP,解决系统兼容等问题.使用Cordova