1. 安装node

node下载地址

2. 安装淘宝 NPM

npm 是node.js 的包管理工具。

镜像命令地址

#命令行: npm install -g cnpm

3. 安装vue

# 全局安装 vue-cli
#命令行: cnpm install -g vue-cli

4. 创建一个基于 "webpack" 模板的新项目

#创建一个项目文件夹,在文件夹下shift + 右键,选择在此处打开cmd
#命令行:vue init webpack

5. 安装依赖

#安装依赖
#命令行:cnpm install
#安装完毕后,在项目路径下多出了依赖包。

6. 运行项目

#运行项目

#命令行:cnpm run dev

运行成功,默认8080 端口。

如果需要修改端口,进入目录下config文件夹,找到index.js文件,修改port。

修改端口号后在cmd中输入ctrl + c停止项目,重启项目后就修改成功了。

基于webpack的Vue.js开发环境快速搭建的更多相关文章

  1. Vue.js 开发环境的搭建

    1. cnpm install vue-cli(安装vue 脚手架) 2. vue init webpack my-project(my-project:自定义,取一个项目的名字,init 初始化一个 ...

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

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

  3. Mac安装vue.js开发环境

    Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...

  4. 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+

    什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...

  5. 搭建Vue.js开发环境(window10)

    我在配置Vue.js环境的时候遇到了很多的问题,希望能把这些解决方法也介绍给大家,希望能帮到大家,共同学习. 如果要转发,请注明原作者和原产地,谢谢! 注释:下面任何命令都是在windows的命令行工 ...

  6. Java Web 开发环境快速搭建

    Java Web 开发环境快速搭建 在因某种原因更换开发设备后,可依据此文快速搭建开发环境,恢复工作环境. Java开发环境: Windows 10 (64-bit) Oralce JDK Eclip ...

  7. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

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

    由于本人使用的是mac系统,因此在vue.js 的环境搭建上遇到许许多多的坑.感谢 showonne.yubang 技术指导,最终成功解决.下面是个人的搭建过程,权当是做个笔记吧. 由于mac非常人性 ...

  9. windows Android开发环境快速搭建和部署

    windows安装Android的开发环境相对来说比较简单,本文写给第一次想在自己Windows上建立Android开发环境的朋友们,为了确保大家能顺利完成开发环境的搭建,文章写的尽量详细,希望对初级 ...

随机推荐

  1. iOS笔记之AutoresizingMask

    在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. enum {   UIViewAutoresi ...

  2. Beta阶段第2周/共2周 Scrum立会报告+燃尽图 12

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2411] 版本控制:https://git.coding.net/liuyy08 ...

  3. Go安装一些第三方库

    原文链接:https://javasgl.github.io/go-get-golang-x-packages/ 侵权联系删除! go在go get 一些 package时候的会由于众所周知的原因而无 ...

  4. web前端开发常用的几种图片格式及其使用规范

    首先,在正式说图片格式之前,咱们先说一些额外的东西. 矢量图与位图 矢量图是通过组成图形的一些基本元素,如点.线.面,边框,填充色等信息通过计算的方式来显示图形的.一般来说矢量图表示的是几何图形,文件 ...

  5. 老爷机iphone4s 9.2.1降级6.1.3

    原帖见威锋网 sunnyskyline 2017年1月10日发的贴. 本文中加了一些我自己的情况,也是一知半解,抛砖引玉吧. 首先进行备份.进行备份.进行备份. 感谢大神@极端阴险 感谢@shuaig ...

  6. Git 学习记录一

    主要来源参考http://www.runoob.com/git/git-install-setup.html Windows 平台上安装 在 Windows 平台上安装 Git 同样轻松,有个叫做 m ...

  7. mongodb启用Profiling定位问题

    建议使用方法三,最简单且容易查看 一:如果mongodb已经运行了很长时间,此时查看mongod.log很大,没法打开查看相应信息 #ps -ef|grep mongod 找到相应的mongod的进程 ...

  8. wpf 客户端【JDAgent桌面助手】业余开发的终于完工了。。晒晒截图

    目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...

  9. postgresql双机热备、高可用方案(采用pacemaker+corosync实现)

    http://blog.csdn.net/qguanri/article/details/51151974 需求描述 我们有两台centos7的数据库主机A.B.要对A.B实现双机热备,A作为数据库m ...

  10. Android wm指令用法详解

    wm 是查看和设置显示信息的指令,此指令只能临时调试使用. wm:查看 wm 指令信息 $ adb shell root@rk3288:/ # wm wm usage: wm [subcommand] ...