Vue安装以及Vue项目创建以及Vue Devtools安装

这几天一直在学习Vue.js框架。

因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措。

在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建开发环境。

这里记录下搭建过程(教程参考网上各前辈提供的资料):

安装Node.js:从Node.js官网安装Node.js。

  安装完成后,直接在命令行程序(win + R => 输入 cmd)中输入 node -v 验证是否安装成功。

  Vue安装以及Vue项目创建以及Vue Devtools安装如图,node -v后输出了版本号“v6.11.4”,安装成功。

安装淘宝npm镜像(在国内淘宝npm镜像速度较快,可代替官方npm镜像):命令提示符中输入 => npm install -g cnpm –registry=https://registry.npm.taobao.org 回车,等待安装完成。

安装vue命令行工具(Vue-CLI):命令行程序内输入 cnpm install -g vue-cli (此处输入cnpm就是表示使用淘宝npm镜像,若使用官方npm,则输入 npm install --global vue-cli),回车,等待安装完成。

  安装完成后,直接在命令行程序中输入 vue 验证是否安装成功。

  Vue安装以及Vue项目创建以及Vue Devtools安装如图,出现了类似以上的信息,那么,安装成功。

安装过程告一段落。

接下来,开始创建项目。

还是在命令行程序中操作 ↓

【这一步根据喜好,*决定是否需要,并*决定输入内容:在创建项目前,在命令行程序中输入  cd d:\文档 进入 d盘 的 文档 文件夹内。这样就可以将下面步骤创建的项目,创建在 d盘 的 文档 文件夹内。当然,如上所述,*决定项目创建的路径。】

命令行程序中输入 vue init webpack project_folder_name (项目文件夹名自定义),回车。

稍等,会一步一步出现如下信息:

Vue安装以及Vue项目创建以及Vue Devtools安装

按照提示,完成即可。

此时,项目创建完成。

开始安装依赖:

  命令行程序中输入 cd project_folder_name (刚才自定义的项目文件夹名称)进入文件夹。

  命令行程序中输入 cnpm install (使用cnpm的原因同上面的cnpm)。回车,等待安装完成。

此时,项目文件夹目录内,应该已经有了 node_modules 文件夹,那么,恭喜!依赖安装完成。

不出意外的话,项目应该已经搭建完成了。

试一试吧:命令行程序中输入 npm run dev

Vue安装以及Vue项目创建以及Vue Devtools安装

出现以上信息后,系统将自动打开浏览器(地址为:http://localhost:8080),如果没有自动打开浏览器,可在输入 npm run dev 后手动打开浏览器,并输入以上地址。

综上!

(以上Win10 64系统)

——————————————————————— 分割线 ———————————————————————

Vue Devtools 安装:

点击 Vue Devtools 进入下载页面。

可下载zip包,放入本地 d盘的文档 文件夹里(您随意,爱放哪就放哪,自己找得到就行)。

Vue安装以及Vue项目创建以及Vue Devtools安装

解压到文件夹(此处,我直接设定问文件夹名和压缩包同名。)

下载好,并解压好后,打开命令行程序。

在命令行程序中输入 cd D:\文档\vue-devtools-master 进入工程所在文件夹。

在命令行程序中输入 cnpm install 回车,等待。

  Vue安装以及Vue项目创建以及Vue Devtools安装

命令行程序中输入 npm run build 回车,等待。

Vue安装以及Vue项目创建以及Vue Devtools安装

然后,打开下图目录内的 mainfest.json 文件。

Vue安装以及Vue项目创建以及Vue Devtools安装

修改 background 节点下 persistent 属性的值 为 true。

Vue安装以及Vue项目创建以及Vue Devtools安装

保存。

打开 Google Chrome。

在网址栏输入 chrome://extensions 打开扩展程序。

勾选开发者模式,并点击 ”加载已解压的拓展程序...“ 按钮。

Vue安装以及Vue项目创建以及Vue Devtools安装

选择chrome文件夹。

Vue安装以及Vue项目创建以及Vue Devtools安装

安装完成。

效果图:

Vue安装以及Vue项目创建以及Vue Devtools安装

上一篇:Memory Allocation in the MySQL Server


下一篇:pycharm连接远程python的开发环境