快捷搜索:

您的位置:澳门新葡4473网站 > 澳门新葡4473网站 > Vue安装以及Vue项目创建以及Vue Devtools安装

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

发布时间:2019-11-14 16:37编辑:澳门新葡4473网站浏览(124)

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

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

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

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

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

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

      澳门新葡4473网站 1澳门新葡4473网站,如图,node -v后输出了版本号“v6.11.4”,安装成功。

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

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

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

      澳门新葡4473网站 2如图,出现了类似以上的信息,那么,安装成功。

    安装过程告一段落。

    接下来,开始创建项目。

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

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

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

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

    澳门新葡4473网站 3

    按照提示,完成即可。

    此时,项目创建完成。

    开始安装依赖:

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

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

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

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

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

    澳门新葡4473网站 4

    出现以上信息后,系统将自动打开浏览器(地址为: npm run dev 后手动打开浏览器,并输入以上地址。

    综上!

    (以上Win10 64系统)

     

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

     

    Vue Devtools 安装:

    点击 Vue Devtools 进入下载页面。

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

    澳门新葡4473网站 5

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

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

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

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

      澳门新葡4473网站 6

     

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

    澳门新葡4473网站 7

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

    澳门新葡4473网站 8

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

    澳门新葡4473网站 9

    保存。

    打开 Google Chrome。

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

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

    澳门新葡4473网站 10

    选择chrome文件夹。

    澳门新葡4473网站 11

    安装完成。

    效果图:

    澳门新葡4473网站 12

     

    本文由澳门新葡4473网站发布于澳门新葡4473网站,转载请注明出处:Vue安装以及Vue项目创建以及Vue Devtools安装

    关键词: