Vue.js环境安装步骤

Vue.js环境安装步骤：

1.       node.js下载：

打开浏览器搜索node.js官网，点击第二个导航栏download，点击Windows Installer会弹出下载框下载

 

下载完成之后安装，安装时等待一会会弹出框然后点Next,路径默认存在C盘，一直点Next继续安装。

安装完成之后打开DOS窗口，也可以使用快捷键win+R，你会发现       运行框中有个cmd,这时候直接回车就好

这时候我们输入node然后回车进入node交互模式

我们在运行框中输入node –v回车这时候会出现对应的node.js版本

输入 npm–v也会显示出npm的版本信息

这个时候就说明我们的node环境已经安装完成，npm包管理器也有了

 

2.       安装cnpm

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

 

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

在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

安装好之后我们就可以接下来就开始使用vue-cli来构建项目。要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。在这里我把我的文件创在了C盘下，所以我们需要在运行框中将目录改变到我的文件夹目录，然后在命令行中运行命令 vue init webpack vue

运行初始化命令的时候回会让用户输入几个基本的选项，项目名称，描述，作者等信息，括号里会有提示，如果不想填直接回车默认括号里的内容就好，一直到需要用户选择yes和no时，这时候选择为如上图所示，最后一个选项直接回车默认第一个选项，接下来我们就等待进度完成再进行下一步

 

执行完上面这一步我们就可以按照运行框中的提示进行下一步了

4.      运行项目

 

 

 

项目运行成功后我们打开浏览输入http://localhost:8080地址就可以看到下图画面，如果要中止项目的话按键盘ctrl+C会出现询问要终止批处理操作吗，这时候键盘输入Y后回车就可以继续操作了

为了避免以后重复次数，所以我在这里就一次性装好所需要的

5.安装json和resource和router

 

 

5.    安装vue develop tools

下载参考网址：https://www.cnblogs.com/tanyongli/p/7554045.html

先在github下载devtools源码，地址为：https://github.com/vuejs/vue-devtools,将下载好的压缩包解压到自己新建的文件夹下，之后在运行框中将路径转到文件夹下的vue-devtools-master，执行cnpm install之后回车，可以看到如下图所示就可以执行下一步了

 

 

 

然后执行npm run build

 

完成之后文件夹会多出这个文件

 

在自己新建的文件目录下找到chrome目录下的mainifest.json中的并修改其中的一处persistant为true

 

 

打开谷歌浏览器的设置--->扩展程序--à勾选开发者模式

shells目录下，chrome的整个文件夹直接拖拽到当前浏览器中，并选择启用，即可将插件安装到浏览器

 

打开一个已有的vue项目，运行项目，然后在浏览器中--->设置--->更多工具--->开发者工具，进入调试模式：发现vue.js is not detected 

 

可以修改一下webpack.config.js的代码如下：

       

然后我们重启一下vue项目就可以使用了