快捷搜索:
来自 67677新澳门手机版 2019-06-18 06:22 的文章
当前位置: 67677新澳门手机版 > 67677新澳门手机版 > 正文

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

近年来一贯在念书Vue.js框架。

因为原先尚未前者项指标阅历,也没学过什么样前端框架,所以,对于vue.js的上学某个慌乱。

在vue.js官方网站看教程,依据教程引导,能够毫不脚手架开拓,也足以搭建开采条件。

这里记录下搭建进度(教程参照他事他说加以考察网络各前辈提供的资料):

设置Node.js:从Node.js官方网站安装Node.js。

  安装实现后,直接在指令行程序(win 奥迪Q3 => 输入 cmd)中输入 node -v 验证是或不是安装成功。

  图片 1如图,node -v后输出了版本号“v6.11.4”,安装成功。

安装天猫商城npm镜像(在境内天猫npm镜像速度比较快,可取代官方npm镜像):命令提示符中输入 => npm install -g cnpm –registry= 回车,等待安装到位。

设置vue命令行工具(Vue-CLI):命令行程序内输入 cnpm install -g vue-cli (此处输入cnpm就是意味着使用Tmallnpm镜像,若选取官方npm,则输入 npm install --global vue-cli),回车,等待安装完成。

  安装到位后,直接在指令行程序中输入 vue 验证是还是不是安装成功。

  图片 2如图,出现了看似上述的新闻,那么,安装成功。

设置进程告一段落。

接下去,起头创办项目。

可能在命令行程序中操作 ↓

【这一步依据喜好,自由支配是还是不是须要,并随机支配输入内容:在创立项近年来,在命令行程序中输入  cd d:文书档案 进入 d盘 的 文书档案文件夹内。那样就足以将上面步骤创立的类型,创造在 d盘 的 文档文件夹内。当然,如上所述,自由支配项目创建的门路。】

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

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

图片 3

依照提醒,达成就可以。

此刻,项目开创完结。

千帆竞发设置注重:

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

  命令行程序中输入 cnpm install (使用cnpm的原故同地方的cnpm)。回车,等待安装到位。

那会儿,项目文件夹目录内,应该已经有了 node_modules 文件夹,那么,恭喜!重视安装到位。

不出意外的话,项目相应早就搭建完结了。

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

图片 4

并发上述消息后,系统将活动展开浏览器(地址为: npm run dev 后手动打开浏览器,并输入以上地点。

综上!

(以上Win10 64系统)

 

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

 

Vue Devtools 安装:

点击 Vue Devtools 进入下载页面。

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

图片 5

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

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

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

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

  图片 6

 

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

图片 7

接下来,张开下图目录内的 mainfest.json 文件。

图片 8

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

图片 9

保存。

打开 Google Chrome。

在网站栏输入 chrome://extensions 张开扩充程序。

勾选开拓者形式,并点击 ”加载已解压的实行程序...“ 开关。

图片 10

选择chrome文件夹。

图片 11

安装完结。

效果图:

图片 12

 

本文由67677新澳门手机版发布于67677新澳门手机版,转载请注明出处:Vue安装以及Vue项目创建以及Vue

关键词: