搭建vue2.0开发环境及手动安装vue-devtools工具

安装vue脚手架
1.安装node.js,如果安装成功输入 node -v ,查看node版本号,输入npm -v查看npm版本
https://nodejs.org/en/
2.注册淘宝镜像,定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装vue的脚手架vue-cli,安装完后,输入vue查看是否有提示信息

cnpm install --global vue-cli

4.使用脚手架新建一个vue项目
首先,切盘到D盘,命令 D:
然后,切换到自己的文件夹下
输入:vue init webpack vue-project-test
回车,vue-project-test是我自己的文件夹的名字,是基于webpack的项目,输入之后就一直回车
5.安装依赖,然后运行

安装vue-devtools工具
1.在官网下载源码:https://github.com/vuejs/vue-devtools
2.安装yarn,查看版本:yarn --version

npm install -g yarn

3.安装yarn淘宝镜像
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
4.进入下载的vue-devtools源码文件夹下,运行

yarn install
yarn run build

5.依赖安装及编译完成后加载到谷歌浏览器
vue-devtools/packages/shell-chrome/

在这里插入图片描述

编译好的资源已上传(都可以直接加载到谷歌浏览器)
没有使用谷歌浏览器打包的vue-devtools:
https://download.csdn.net/download/InternetJava/12190927
使用谷歌浏览器打包的vue-devtools:
https://download.csdn.net/download/InternetJava/12190919
在这里插入图片描述

参考:https://www.jianshu.com/p/0c6678671635

发布了29 篇原创文章 · 获赞 0 · 访问量 4042

猜你喜欢

转载自blog.csdn.net/InternetJava/article/details/104497012
今日推荐