vue环境通过bower搭建

Bower的安装为什么使用bower,因为它可以节省掉你去git或是网上找js的时间;

bower 安装之前先安装Git,可参考(点击打开链接)

在D盘下新建一个vue文件夹(D:\vue)

vue环境通过bower搭建_第1张图片

(windows条件下:如果快捷列表里没有找到找到 Git CMD,通过安装路径找到 C:\Program Files (x86)\Git\Git CMD

vue环境通过bower搭建_第2张图片

之后就可以用npm包管理工具下载并全局安装bower

d:    cd vue    npm install -g bower

vue环境通过bower搭建_第3张图片

安装完成过后在此页面可通过 bower -v 查看当前版本号

vue环境通过bower搭建_第4张图片

在当前文件夹下需要加一个.bowerrc文件。注意,不需要名字什么的,只要新增一个.bowerrc就行了。

type null >.bowerrc

vue环境通过bower搭建_第5张图片

 

通过编辑器打开这个文件,添加代码(以后一些生成的插件,将会放入这个lib文件下)

{
"directory": "lib"

}

由于在实际安装过程中,没有运行命令>bower init 现在重新运行该命令 生成bower.json

解决办法:在 windows cmd(管理者) 里面使用 bower init,而不是在 git bash 里

初始化当前工程的bower,此操作会在当前目录下生成bower.json文件:(一直按回车键,使用它默认的东西就可以)

>bower init

vue环境通过bower搭建_第6张图片

bower install vue  --save-dev(将会在lib 文件夹下生成vue文件)

vue环境通过bower搭建_第7张图片

 

 

vue调试工具安装(基于谷歌浏览器插件,可以看到vue里对应的数据)

点击进入网页(点击打开链接)

vue环境通过bower搭建_第8张图片

找到当前的vue文件夹右键打开Git

vue环境通过bower搭建_第9张图片

将之前copy的路径复制过来 在前面加上 git clone 

vue环境通过bower搭建_第10张图片

输入cd vue-devtools,进入到vue-devtools文件夹下

然后安装npm :cnpm install

vue环境通过bower搭建_第11张图片

安装完成后输入:npm run build

vue环境通过bower搭建_第12张图片

进入谷歌浏览器,进行如下操作

vue环境通过bower搭建_第13张图片

然后进入到vue环境通过bower搭建_第14张图片

进入到安装vue路径下的 vue-devtools文件夹

vue环境通过bower搭建_第15张图片

vue环境通过bower搭建_第16张图片

 

你可能感兴趣的:(vue,vue)