57.搭建Vue环境
- nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3

- cmd命令行:
node -v //显示node版本 v6.10.3
npm -v //显示npm包管理器版本 3.10.10

- 由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm

- Cmd命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org


- 安装vue-cli脚手架构建工具

- 至此,我们需要的环境及工具已经准备好了。
接下来,我们使用vue-cli来构建项目。
- 首先,我们先选择进入到e我们的工作目录为 E:\个人\VueJS。此目录需先建好,目前是空的,这个工作目录以后会添加各个项目目录。

- 在VueJs目录下,运行命令vue init webpack firstVue。其中,webpack是构建工具、模块打包器,也就是整个项目是基于webpack的。其中,firstVue是项目文件夹的名称,这个文件夹会自动生成在vuejs这个工作目录中。

安装过程中,需要我们输入项目名称,描述,作者,版本(独立版),使用ESLint规范等等,此时,我们看到工作目录下已经自动生成了目录firstVue,如下图。

- 主要用的包都在package.json中,如下图

- cd到我们的项目文件夹firstVue中,运行命令cnpm install 安装包,(注意:我们已经使用淘宝镜像cnpm)

- 安装完之后,我们发现项目文件夹下多了一个node_modules目录,里面就是项目依赖包资源

- 安装完依赖包之后,就可以运行整个项目了。 运行项目在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。


- 如果启动过程中出现下方问题,只需要将config目录下的index.js文件中dev端口由8080改为8088


57.搭建Vue环境的更多相关文章
- 初次搭建vue环境(最基础的)
一直以来觉得搭建环境是自己的短板,恰巧老大跟我说他刚才面试一个有4年工作经验的人,给那面试的人出了到机试题,给了1小时的时间连环境都没搭好.且不说那人的工作经验是否掺有水分,自己还是有点尴尬的,以前的 ...
- VUE-Windows系统下搭建vue环境
一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:).注意记下路径.. 此处默认安装这4项即可,点击Next按钮. ...
- 18.搭建 vue 环境
第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...
- 搭建Vue环境总是出错,就重新安装就好了
总是报错,还不如重新安装.. 错误千奇百怪,解决了 这个错误又会出现另外一个. 百度了一个挺好用的e 在window下搭建Vue.Js开发环境 nodejs官网http://nodejs.cn/下 ...
- 如何搭建Vue环境?
搭建vue的开发环境: https://cn.vuejs.org/v2/guide/installation.html 1. 必须要安装nodejs cnpm 下载包的速度更快一些. 地址: ...
- 手动搭建Vue环境
Vue+webpack+babel环境搭建 github地址 https://github.com/haoyongliang/webpack-babel-Vue 1.首先要了解Vue项目结构 简单的目 ...
- 搭建vue环境
1. 下载安装nodejs 截至2018-06-05 最新稳定版本为 8.11.2,直接 next ,不改目录. PS C:\Users\Administrator> node -v v8.11 ...
- 在windows下用脚手架搭建vue环境
做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接 ...
- 手把手教你搭建 vue 环境
第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...
随机推荐
- go module下golang.org如何处理被墙
一.系统提示 go: golang.org/x/sys@v0.0.0-20180905080454-ebe1bf3edb33: unrecognized import path "golan ...
- Android 反编译apk
工具介绍: apktool 作用:资源文件获取,可以提取出图片文件和布局文件进行使用查看 下载地址:https://bitbucket.org/iBotPeaches/apktool/downl ...
- windows 端口被占用,并杀死进程的方法
netstat -ano | findstr 8081 查询端口 被什么进程占用 tasklist | findstr 2184 根据进程号 查询任务名称 taskkill /f /t /im jav ...
- javascript:变量的作用域
window.onload = function (){ // 1) 在if或else代码块中声明的变量,在代码块的外面也可以取到 if(1==1){ var b = 12; }else{ var b ...
- jedis中scan的实现
我的版本说明: redis服务端版本:redis_version:2.8.19 jedis: <dependency> <groupId>redis.clients</g ...
- StringUtils 工具类的常用方法(转载)
http://guobin6125.iteye.com/blog/1535792
- windows服务器的误解
自以为服务器就一种 配置,mac,windows服务器 目的:mac希望连接windows服务器,并替换打包的项目文件, 误区,使用ssh 最后明白了 直到看到一句话 阿里云ECS的安全组默认只放行2 ...
- windows 下面必备软件
弹窗拦截软件 http://www.pc6.com/pc/tcguanggaolj/
- python 笔记 week1-- if while for
1.添加环境变量 windows要加环境变量.linux若升级版本不一致, #!/usr/bin/env python 调用环境变量中的python #!/usr/bin/python 调用系统中默认 ...
- Linux 的基本操作(系统的远程登录)
系统的远程登录 首先要说一下,该部分内容对于linux初学者来讲并不是特别重要的,可以先跳过该章节,先学下一章,等学完后再回来看这一章. Linux大多应用于服务器,而服务器不可能像PC一样放在办公室 ...