vue.js环境搭建

1.nodejs官网http://nodejs.cn/下载安装包

vue.js环境搭建

安装到本地,最后一个页面勾选自动配置环境.

问题:同时安装boxstarted shell 一直重启计算机

(初步解决:在开机自动启动boxstarted shell后立即关闭该窗口)

 

2.进入cmd界面

node -v //显示node版本

npm -v  //显示npm包管理器版本

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

 

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

vue.js环境搭建

 

问题:安装报错

vue.js环境搭建

查看日志发现: 
Unexpected token < in JSON at position 183718

解决方法

删除根目录下package-lock.json文件

vue.js环境搭建

安装完成

 

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

环境搭建完成,使用vue-cli开始构建项目

vue.js环境搭建

6.选择建立存放项目的工作目录

先切换盘符,才能再切换目录

vue.js环境搭建

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

vue.js环境搭建

输入项目名,后面同理

vue.js环境搭建

安装完成后可在之前指定的文件夹下看到构建好的项目

 

8.主要用的包都在package.json中

9.Cd 到项目文件夹firstvue下面,运行命令cnpm install 安装包

vue.js环境搭建

问题:npm 安装 chromedriver卡住

原因:某些版本下,chromedriver 的 zip 文件 url 的响应是 302 跳转,而在 install.js 里使用的是 Node.js 内置的 http 对象的 get 方法无法处理 302 跳转的情况;

解决:可以使用下面的命令安装:

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

vue.js环境搭建

 

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

 

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

 npm run dev

 

12.需要将config目录下的index.js文件中dev端口由8080改为8088

vue.js环境搭建

13.浏览器打开localhost:8088

vue.js环境搭建