vue.js在windows10系统下的环境搭建

yiyiboy-原点      2022-02-12     404

关键词:

vue.js在windows10系统下的环境搭建流程

1、安装node.js(node包含了npm包管理器)

node.js安装包以及源码下载地址:https://nodejs.org/en/download/

注意:使用安装包(.msi)(作为小白的我,直接用了.exe,导致环境变量都不会自动配置,真的挺郁闷的)

下载下来以后可以直接双击安装,按照提示一步步安装。

详细的安装步骤可看网址:http://www.runoob.com/nodejs/nodejs-install-setup.html

到这里npm已经存在了,但是它涉及的资源可能有些是国外的,所以有时候会安装失败,所以我们使用国内的镜像cnpm

2、安装cnpm

详细资料网址:http://npm.taobao.org/

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org,耐心等待安装,安装完成以后可以使用cnpm代替npm

完成后的示意图

完成以后根据vue官网(https://cn.vuejs.org/v2/guide/installation.html)上的安装进行剩余步骤的安装以及工程的创建

3、安装vue-cli脚手架构建工具,帮助搭建所需的模板框架

全局安装vue-cli:npm install --global vue-cli

4、开始创建项目

在cmd窗口中,跳转到你要创建项目的路径,然后输入:vue init webpack my-project(一个基于webpack模板的项目,my-project是项目文件夹的名称)

命令运行过程中会碰到一些项需要你选择(如果你不想填一些信息,直接回车默认就好),我有如下选项:

完成以后,你可以在电脑上打开这个项目文件夹,在文件夹里面会有一个 package.json文件,里面会包含一些依赖的资源,我们需要把这些资源下载下来

到项目文件夹目录,在命令行中输入:npm install  (我安装了cnpm,所以用了cnpm install)

 

安装完成以后,可以在项目文件夹里面看到node_modules文件夹

5、运行项目(测试搭建是否成功)

在命令行中输入:cnpm run dev    注意:还是在当前项目文件夹下

得到结果:

 

到这里环境搭建完成了

 

windows下vue.js开发环境搭建教程

这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下最近,vue.js越来越火。在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教... 查看详情

windows下的reactnative的环境搭建

感觉react好难QAQ 一、开发环境搭建要求  在Windows操作系统搭建ReactNative开发环境要求在电脑上安装好JDK,AndroidSDK,还要求电脑上安装有一套C++编译器,如果没有,推荐安装微软的VIsualStudioCommunity2015 二、环境搭建  1、... 查看详情

electronelectron在windows下的环境搭建

...序的开发方式,现在已经被大众接受。下面就介绍如何在windows(>win7)下快速搭建Electron开发环境。1.nodejs的安装从nodejs下载最新版本的windows安装程序进行安装,我下载的是v6.9.1,安装时一路默认即可,这个安装会把nodejs和npm... 查看详情

搭建windows下的go开发环境

...是x64的系统,那么就安装amd64的就可以了。另外Go语言在Windows下的的安装包有两种:msi和zip的。zip的是免安装的,解压在配置一些环境变量之后就可以使用,msi的则是安装包版本的,安装的时候会设置好对应的环境变量。为了方... 查看详情

windows下的wamp环境搭建

...装方式:源码包安装、rpm包安装、集成环境安装(lnmp)windows安装的两种方式:单个下载安装、集成环境安装(AppServ,phpstudy,wamp) 在Windows系统上安装PHP开发环境:所需软件分别独立安装:安装 查看详情

window下搭建vue.js开发环境

一、安装node.js。https://nodejs.org/en/download/ 最新包会自动安装npm二、安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,大家都知道下载速度是超级慢啊。所以我们要安装cnpm,cnpm是淘宝对npm的镜像服务器,这样依... 查看详情

windows10搭建java环境变量

系统:Windows10软件:JavaSE8配置详细过程1.“此电脑”,右键→“属性,选择“高级系统设置”2.选择环境变量,再系统环境变量 3.新建在新建页面,输入变量名“JAVA_HOME”;变量值“你的JDK的路径,然后点击“确定”。4. ... 查看详情

windows下的flask环境搭建

在Windows中搭建flask框架分为如下几步1.下载ez_setup.py文件,然后在cmd中执行链接:http://pan.baidu.com/s/1qXOSeHu密码:jkbwpythonez_setup.py2.找到python的安装目录,找到Scripts文件夹,将次文件夹的路径添加到环境变量中。3.在cmd中执行安装pi... 查看详情

在windows10上搭建tensorflow环境(代码片段)

在Windows10上搭建TensorFlow环境版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。了解如何为受支持的GPU测试Windows系统,安装和配置所需的驱动程序,获取最新的TensorFlow每日构建版并确保其正常工作... 查看详情

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

...sp;Node.js官网:https://nodejs.org/en/验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口。输入node-v即可得到对应的Node.js版本。 npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了np 查看详情

第19章windows10系统下qt搭建android开发环境

19.2编译Android应用程序19.2.1创建Android(ARM)虚拟设备在SDK目录下,运行“AVDManager.exe”工具,创建虚拟设备。图19-2-1图19-2-2点击创建按钮之后,就填充设备的属性。开始在Windows上,模拟大于768M的RAM 查看详情

关于vue.js运行环境的搭建(mac)

由于本人使用的是mac系统,因此在vue.js的环境搭建上遇到许许多多的坑。感谢 showonne、yubang 技术指导,最终成功解决。下面是个人的搭建过程,权当是做个笔记吧。 由于mac非常人性化的将bash内置于终端中,因此可以... 查看详情

spark在windows下的环境搭建

  由于Spark是用Scala来写的,所以Spark对Scala肯定是原生态支持的,因此这里以Scala为主来介绍Spark环境的搭建,主要包括四个步骤,分别是:JDK的安装,Scala的安装,Spark的安装,Hadoop的下载和配置。为了突出”FromScratch”的特点... 查看详情

spark在windows下的环境搭建

由于Spark是用Scala来写的,所以Spark对Scala肯定是原生态支持的,因此这里以Scala为主来介绍Spark环境的搭建,主要包括四个步骤,分别是:JDK的安装,Scala的安装,Spark的安装,Hadoop的下载和配置。为了突出”FromScratch”的特... 查看详情

windows10下搭建以太坊私有链环境

...建区块链环境有所帮助了解。下面开始进入准备。本次是windows环境下的私有链环境搭建,所以需要做以下准备:1.win10系统(家庭版),64位2.以太坊钱包Ethereum-Wallet-win64-0-10-0(我用的版本0.10.0)3.以太坊geth客户端(我用的是1.4.11... 查看详情

spark在windows下的环境搭建

由于Spark是用Scala来写的,所以Spark对Scala肯定是原生态支持的,因此这里以Scala为主来介绍Spark环境的搭建,主要包括四个步骤,分别是:JDK的安装,Scala的安装,Spark的安装,Hadoop的下载和配置。为了突出”FromScratch”的特点(都... 查看详情

window下的opengl学习环境搭建

...不过有很多开源的库提供了支持。在学习OpenGL时,我选择window上的freeGLUT库作为辅助,用于GUI操作。下面说一下VisualStudio下的OpenGL和freeGLUT环境的搭建。1.下载freeGLUT  下载链接:http://freeglut.sourceforge.net/index.php#download    2.... 查看详情

gtk+浅谈之一windows10下qtcreator中gtk+环境搭建(十几篇)

...+是Linux下的开发环境,因为其跨平台特性,有时候需要在Windows上用到它的。如下是在Windows10下配置GTK+的开发环境。    Gnome的开发基础结构是围绕一组函数库的,所有的内容都是用可移植的ANSIC语言写成的,可以用... 查看详情