搭建vue开发环境

搭建vue的开发环境：

1、必须要安装nodejs

2、搭建vue的开发环境 ，安装vue的脚手架工具 官方命令行工具

npm install --global vue-cli / cnpm install --global vue-cli （ 此命令只需要执行一次 ）

3、创建项目     必须cd到对应的放项目的文件夹里，例如项目放vue文件夹里，则cd vue，然后再进行下面的命令（vue-demo01为项目名）

vue init webpack vue-demo01
cd vue-demo01
cnpm install / npm install  如果创建项目的时候没有报错，这一步可以省略。

如果报错了 cd到项目里面运行 cnpm install / npm install

npm run dev

4、另一种创建项目的方式 （推荐） （vuedemo02为项目名）

vue init webpack-simple vuedemo02
cd vuedemo02
cnpm install / npm install
npm run dev

总结

以上所述是小编给大家介绍的搭建vue开发环境，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 手把手搭建安装基于windows的Vue.js运行环境

    手把手搭建安装基于windows的Vue.js运行环境

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 在配置环境之前呢,有些基础的东西还是要和大家普及一下的.如果你已经对Vue.js有所了解,那请点击 配置步骤 跳转到配置环境的阅读,否则,请耐心看完看完. 首先,介绍一下Vue.js的概念,他是干啥的呢?一定要配置vue的运行环境吗?   如上述Vue.js不是个全能的框架,因为他

  • vue中mint-ui环境搭建详细介绍

     vue中mint-ui环境搭建详细介绍 首先需要如下配置node (最好用淘宝源) $ npm install -g cnpm --registry=https://registry.npm.taobao.org 以及git 从官方github拉下来mint-ui git clone https://github.com/ElemeFE/mint-ui.git 进入mint-ui npm run dev 全程大概5-10分钟,出现 Build completed in 34.926s Chil

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

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

    最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 既然是入门实例,那肯定从最基础的开始了,希望初

  • windows下vue-cli及webpack搭建安装环境

    windows下vue-cli及webpack搭建安装环境

    1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm

  • vue+node+webpack环境搭建教程

    vue+node+webpack环境搭建教程

    一.环境搭建 1.1.去官网安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html ) 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错.推荐最新版本. 下载安装包之后直接点击安装即可.测试安装成功的界面如下: 1.2.利用npm安装webpack命令行语句为npm install webpack -g.测试安装成功的界面如下: 1.3.下面就是安装淘宝镜像,如下图

  • Vue2.0 从零开始_环境搭建操作步骤

    Vue2.0 从零开始_环境搭建操作步骤

    简要:继项目空闲后,开始着手vue的学习;为此向大家分享其中的艰辛和搭建办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一.什么是VUE? 是一种node.js框架,特点如下: 1.数据绑定 (特性:双向绑定:一旦发生变化,Dom节点实时更新:PS:尽量抛弃JQ,次特点已经可以解决很多特效等问题) 2.组件化(比如:乐高积木一样通过互相引用而组装起来) 二.开发环境 三.环境搭建 1. 包管理器安装 (1) Homebrew安装 (mac 环境,win无法安装)

  • 超简单的Vue.js环境搭建教程

    超简单的Vue.js环境搭建教程

    vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下) 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到

  • webpack4手动搭建Vue开发环境实现todoList项目的方法

    前言 平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗? 基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺大的,所以就写一遍文章,分享心得,哈哈!! 基于个人的时间精力问题,把本项目教程分为两部分: webpack4手动搭建Vue开发环境 (本篇文章) 手动搭建Vue项目文件夹实现t

  • 搭建vue开发环境

    搭建vue的开发环境: 1.必须要安装nodejs 2.搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm install --global vue-cli ( 此命令只需要执行一次 ) 3.创建项目     必须cd到对应的放项目的文件夹里,例如项目放vue文件夹里,则cd vue,然后再进行下面的命令(vue-demo01为项目名) vue init webpack vue-demo01 cd vue-dem

  • 使用vue-cli+webpack搭建vue开发环境的方法

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

    在这里我们需要首先下载node,因为我们要用到npm包下载,是基于node的 废话不多说,我们直接进入正题 下载node,同时需要下载git,以后我们就在git上输入命令来搭建我们的vue环境 git用的是linux命令 不要问为什么,能用就行,你说是不是? windows系统,下载完git以后我们再桌面右击鼠标会看到git Bash,点开它,然后就打开了git, git有很多功能,同时git可以往github上push你的文件,github是一个很不错的仓库管理工具哦 好,我们直接开始,打开g

  • karma+webpack搭建vue单元测试环境的方法示例

    karma+webpack搭建vue单元测试环境的方法示例

    最近做了一次关于vue组件自动化测试的分享,现在将vue组件单元测试环境搭建过程整理一下.这次搭建的测试环境和开发环境隔离,所以理论上适用所有使用vue的开发环境. 准备 这篇文章的重点在于搭建测试环境,所以我随便写了个webpack的vue开发环境. 代码地址:https://github.com/MarxJiao/vue-karma-test 目录结构如下 目录结构 app.vue和child.vue代码 app.vue child.vue 运行效果如下: 运行效果 测试环境搭建 注意:这里

  • 使用Webpack 搭建 Vue3 开发环境过程详解

    从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 package.json 文件 Webpack 的配置文件 project project-name + |- index.html |- package.json + |- webpack.config.js + |- /src + |- index.js webpack.config.js '

  • openEuler 搭建java开发环境的详细过程

    openEuler 搭建java开发环境的详细过程

    目录 1. 初始化环境 2. 安装jdk8 3. 安装SVN 4. 安装Git 5. 安装Node.js 6. 下载并激活IntelliJ IDEA 7. 下载并激活Navicat 本文操作系统及版本号:↓openEuler release 22.03 LTSLinux version 5.10.0-60.35.0.64.oe2203.x86 _64 1. 初始化环境 # 1. 更新依赖库 yum -y update # 2. 安装常用工具包 yum -y install wget tar vi

  • 详解ubuntu搭建Java开发环境

    没有用Java写过程序,做为一个Java新手,在写第一个Hello,world程序之前,先在Ubuntu中搭建Java开发环境. 本文结构: 一.JDK安装 二.MyEclipse安装 三.Hello World测试 一.JDK安装 好吧,我选择JDK1.6,是不是有点out了? 1.下载JDK1.6,你可以到官网去下载,下载时请看清自己的系统版本,记得一定要下载相应的版本. 2.将下载的文件放置到/usr/lib/java目录下(需要手动创建java目录),并修改文件的可执行权限,如chmod

  • Ubuntu搭建Java开发环境笔记

    没有用Java写过程序,做为一个Java新手,在写第一个Hello,world程序之前,先在Ubuntu中搭建Java开发环境. 一.JDK安装 好吧,我选择JDK1.6,是不是有点out了? 1.下载JDK1.6,你可以到官网去下载,下载时请看清自己的系统版本,记得一定要下载相应的版本. http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javase6-419409.ht

  • 利用docker-compose搭建AspNetCore开发环境

    利用docker-compose搭建AspNetCore开发环境

    使用docker-compose搭建AspNetCore开发环境 1 使用docker-compose搭建开发环境 我们的目标很简单:使用docker-compose把若干个docker容器组合起来就成了. 首先使用Nginx代理所有的Web程序,这样只需要在主机上监听一个端口就可以了,不污染主机.再组合各Web程序.Redis/Memcached.SqlServerOnLinux. 新建一个目录sites,所有和集群相关的都放在这里,目录结构如下所示 sites     nginx      

  • 在Mac OS下搭建LNMP开发环境的步骤详解

    一.概述 大家应该都知道LNMP代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器架构.Linux是一类Unix计算机操作系统的统称,是目前最流行的免费操作系统.代表版本有:debian.centos.ubuntu.fedora.gentoo等.Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器.Mysql是一个小型关系型数据库管理系统.PHP是一种在服务器端执行的嵌入HTML文档的脚本语言.这四种软件均为免费开源软件,组合到一

随机推荐