搭建vue开发环境的步骤

原文链接

vue现在在前端,相对于算是现在前端工程师都比较常用的框架之一,他和angular有一些相似之处,所以用过angular的伙伴们,再来学习vue应该不会感觉太难;

一:在搭建vue的开发环境之前,一定一定要先下载node.js,,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64 ,网址:http://nodejs.cn;

二:下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号,

这样就已经是安装成功了,由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用

淘宝的cnpm命令管理工具可以代替默认的npm管理工具:$ npm install -g cnpm --registry=https://registry.npm.taobao.org;

三:淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli  回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;

四:搭建完手脚架之后,我们要开始建一个新项目,这个时候我建议,精良不要装在C盘,因为vue下载下来的文件比较大,如果要改盘的话,直接输入D:回车就可以直接改盘,

然后我们开始创建新的项目输入命令:vue init webpack my-project  回车,my-project是我自己的文件夹的名字,是基于webpack的项目,输入之后就一直回车,直到出现是否要安装vue-route,

这个我们在项目要用到,所以就输入y 回车

下面会出现是否需要js语法检测,这个我们暂时用不到,就可以直接输入no,后面的都可以直接输入no,都是我们暂时用不到的

四:文件夹已经下载好了,现在就可以进入文件夹,输入: cd my-project 回车,因为各个模板之间都是相互依赖的,所以现在我们要安装依赖,

输入命令:cnpm install

五:已经安装好之后,现在要来测试一下我们下载好的模板能不能正常的运行,在命令行输入:cnpm run dev 回车即可,

8080是默认的端口,要访问的话,直接在浏览器输入localhost:8080就可以打开默认的模板了;

vue基础项目已经安装并运行

原文地址:https://www.cnblogs.com/GoCircle/p/8124727.html

时间: 2024-08-04 22:39:39

搭建vue开发环境的步骤的相关文章

搭建vue开发环境的步骤,六步完成

搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:http://nodejs.cn:注意是32还是64位:二:下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号. 三:淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:npm install --global

【原创】win10下搭建vue开发环境+IIS部署

[原创]win10下搭建vue开发环境 如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. node.js的官方地址为:https://nodejs.org/en/download/,如下图所示: 根据自己电脑的具体配置,选择你要下载的安装

使用vue-cli+webpack搭建vue开发环境

在这里我真的很开心,好久没有用过博客,今天突然看到了我的博客有不少人看过,虽然没有留下脚印,但是还是激起了我重新拿起博客的信心,感谢大家. 在这里我们需要首先下载node,因为我们要用到npm包下载,是基于node的 废话不多说,我们直接进入正题 下载node,同时需要下载git,以后我们就在git上输入命令来搭建我们的vue环境 git用的是linux命令 不要问为什么,能用就行,你说是不是? windows系统,下载完git以后我们再桌面右击鼠标会看到git Bash,点开它,然后就打开了g

windows下搭建vue开发环境实践

Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.2016年,Vue同Angular.React形成三足鼎立的局面.为了提升自己的知识面,今天实践操作一下Vue的环境搭建. 一.安装node.js Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js.官方地址为:https://n

vue开发环境安装步骤

前提:vue开发前提是安装好nodejs后,在nodejs环境下运行 1.npm工具在国内的网络环境下比较慢 推荐使用淘宝npm镜像https://npm.taobao.org/ 使用以下命令安装cnpm,以后就可以用cnpm来代替npm: npm install -g cnpm --registry=https://registry.npm.taobao.org 2.cnpm -v 查看当前cnpm安装版本 3.cnpm install -g vue-cli 安装脚手架(-g全局安装在系统的n

Windows下安装nodejs并进一步搭建vue开发环境步骤(二)

1.  安装cnpm 说明:由于许多npm包都是在国外,我们这里用到淘宝的镜像服务器,来对我们依赖的module进行安装,因此首先安装"中国的npm"--cnpm 参考网址:http://npm.taobao.org/ 安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org 2.  用cnpm安装vue 安装命令:cnpm install vue -g 3.  安装vue命令行工具 安装命令:cnpm i

windows下搭建vue开发环境+IIS部署

特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. node.js的官方地址为:https://nodejs.org/en/download/,如下图所示: 根据自己电脑的具体配置,选择你要下载的安装包,作者选择的是windows 64bit. 下载完毕,按照windows一般应用

使用webpack搭建vue开发环境

最近几天项目上使用了vue.js作为一个主要的开发框架,并且为了发布的方便搭配了webpack一起使用.CSS框架使用的是vue-strap(vue 对bootstrap控件做了封装)这篇文章主要总结一下具体搭建的过程,和途中遇到的一些问题的解决办法 主要用到的工具 Vue webpack vue-strap vue-router 搭建步骤 1. 首先建立项目的目录结构 demo_project/ dist/ webpack生成的文件 src/ 源代码文件 img/ 图片文件 css/ css文

基于Visual Studio Code搭建Vue开发环境

安装node.js最新版 这里安装的是8.11.4版 image.png 更新npm至最新版 安装node.js后, npm默认版本为: 6.1.0 image.png 使用npm install npm -g更新npm至最新版 image.png 安装vs code 安装过程就忽略了. 安装@vue/cli > npm install -g @vue/cli image.png 创建一个vue-demo-project工程 创建过程中默认配置(开箱即用) image.png image.png