vuejs环境搭建

蝴蝶纷飞      2022-02-11     448

关键词:

1.安装node.js

首先进入node.js中文网http://nodejs.cn/下载nodejs

下载后

打开命令提示符执行下列命令(打开方式:window + r 输入cmd回车):

node -v查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。PS:未能出现版本号,请尝试注销电脑重试;

npm -v查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器;

 

2.选装cnpm

因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。!来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”;

官方网址:http://npm.taobao.org

安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org

其中-g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;  非全局安装:将会安装在当前定位目录;  全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;

 注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

 

 

注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。

3 创建一个新项目

使用命令:vue init webpake my-vue-roject创建一个my-vue-project项目。

 使用命令:cd my-vue-project可以进入my-vue-project目录。

在文件夹中可以打开项目,查看项目结构。

但是此时还是无法运行的。

4 运行项目

使用命令:cnpm install安装依赖,如下图所示

之后再使用命令:npm run dev运行项目,运行结果在浏览器中展示。

 

5 使用git bash运行项目

首先安装git

安装成功后,新建一个文件夹存储项目,选中文件夹右键,有个git bash选项,进入后输入命令cnpm i安装项目依赖,使用npm run dev运行项目,如下图所示:

 

vuejs开发环境搭建及热更新

...分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置项目。1、安装node  https://nodejs.org/en/download/由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需... 查看详情

vuejs之开发环境搭建

Vue.jsVue.js是目前很火的一个前端框架,采用MVVM模式设计,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用,特别适合单页应用的开发。Vue.js是数... 查看详情

在windows下搭建vuejs开发环境

转自:https://www.cnblogs.com/RexSheng/p/6934413.htmlnodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的v6.10.3,也可选择阿里云镜像https://npm.taobao.org/mirrors/node/,2019/3/23更新:建议选择v10版本以上,官... 查看详情

vue环境搭建

...前后端同事进行功能对接,建议每个同事都准备好前后端环境(前端的同事参考文档第二部分,后端同事请参考第一部分),只要保持前后端代码是最新的就可以在自己本地进行功能测试,减少沟通障碍,提高联调效率。Vue2.0官... 查看详情

vuejs——搭建个人博客(学习笔记)

1>环境搭建node-vcnpm-vcnpminstall--globalvue-clivueinitwebpack项目名称全部选Ncd到项目cnpminstall安装项目依赖npmrundev运行修改端口号——build文件夹下dev-server.js文件varpory=端口号为项目创建组件大致流程——在components文件夹下新建addFace.vu... 查看详情

01-angularjs开发环境搭建(代码片段)

一、概述##时下web前端非常热门,新的框架层出不穷,web前端的三驾马车VueJS、AngularJS、ReactJS发展非常迅猛。其中VueJS是国人开发的项目,百度热点趋势以1000%的速度在增长,其中是否有有我大天朝的情怀在吧。Angu... 查看详情

vue2.*环境搭建01

搭建vue的开发环境:https://cn.vuejs.org/v2/guide/installation.html1、必须要安装nodejs 2、搭建vue的开发环境,安装vue的脚手架工具官方命令行工具 npminstall--globalvue-cli/cnpminstall--globalvue-cli(此命令只需要执行一次) 3、创建项目必须cd到... 查看详情

搭建vue的开发环境(代码片段)

搭建vue的开发环境:https://cn.vuejs.org/v2/guide/installation.html(官网地址)1、必须要安装nodejs2、搭建vue的开发环境,安装vue的脚手架工具  官方命令行工具npminstall--globalvue-cli/cnpminstall--globalvue-cli(此命令只需要执行一次)3、... 查看详情

57.搭建vue环境

....taobao.org 安装vue-cli脚手架构建工具至此,我们需要的环境及工具已经准备好了。接下来,我们使用vue-cli来构建项目。首先,我们先选择进入到e我们的工作目录为 E:个人VueJS。此目录需先建好,目前是空的,这个工作目录... 查看详情

vuejs2.0构建一个彩票查询webapp(代码片段)

...ioCode。技术栈为vue2+vuex+axios+vue-router+mintUI备注:Vue.js开发环境的搭建,参见window下搭建Vue.Js开发环境一,构建项目脚手架在我的工作区下输入vueinitwebpackLottery,会自动构 查看详情

vue项目ide(vue项目环境搭建)

一、先介绍一下我接下来要做的项目项目:ide可视化工具技术应用:  Vue2.0(js框架):https://cn.vuejs.org/  ElementUi(饿了吗ui框架基于vue的):http://element.eleme.io/#/zh-CN  Ecahrts(图表):http://echarts.baidu.com/  vue-power-drag(... 查看详情

vue2.0新手入坑环境搭建

...s://github.com/vuejs/vue-cli 一、安装node.js首先需要安装node环境,可以直接到中文官网http://nodejs.cn/ 查看详情

vuejs生产环境部署

...言,所以部署的时候是不需要基于nodejs或其他服务器运行环境,只需要像其他静态站点的方式发布就可以了,下面介绍一下VueJs具体发布的流程还有需要注意的点。  先来看VueJs最终生成的文件目录:      具体的... 查看详情

vuejs和element搭建的一个后台管理界面(代码片段)

介绍:  这是一个用vuejs2.0和element搭建的后台管理界面。 相关技术:  vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。  element:基于vuejs2.0的ui组件库。  vue-router:一般单页面应用spa... 查看详情

vue组件库基于@vue/cli构建typescript版ui库-环境搭建

使用@vue/cli4脚手架,从零开始搭建typescript版的UI库1.全局安装@vue/cli4官网地址:https://cli.vuejs.org/zh/guid...npminstall-g@vue/cli#ORyarnglobaladd@vue/clivue--version@vue/cli4.5.13#当前版本2.构建项目#创建项目totorovuecreatetotoro#配置选项 查看详情

vuejs填坑日记之项目文件认识

上一篇博文,我们搭建了一套基础的vuejs的环境,首先安装node.js,然后利用npm包管理器,安装vue-cli,设置淘宝镜像,初始化项目,安装依赖,运行。在这一篇,我们将认识vuejs项目里的各个目录结构。基础项目目录build //编译配... 查看详情

查看语言环境并再次获取文章 - Vuejs

】查看语言环境并再次获取文章-Vuejs【英文标题】:Watchthelocaleandfetcharticlesagain-Vuejs【发布时间】:2018-08-2700:35:35【问题描述】:文章控制器<?phpnamespaceApp\\Http\\Controllers\\Articles;useIlluminate\\Http\\Request;useApp\\Http\\Controllers\\Controlle 查看详情

vue的开发环境与项目的创建

  搭建vue的开发环境: https://cn.vuejs.org/v2/guide/installation.html1、必须要安装nodejs 2、搭建vue的开发环境,安装vue的脚手架工具官方命令行工具 npminstall--globalvue-cli/cnpminstall--globalvue-cli(此命令只需要执行一次) 3、创建... 查看详情