在vue.js官方网站看教程

近期平昔在读书Vue.js框架。

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

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

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

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

  安装达成后,直接在命令行程序(win + 奇骏 => 输入
cmd)中输入 node -v
验证是或不是安装成功。

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

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

安装vue命令行工具(Vue-CLI):命令行程序内输入 cnpm install -g vue-cli
(此处输入cnpm正是代表使用天猫商城npm镜像,若使用官方npm,则输入 npm install
–global vue-cli),回车,等待安装到位。

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

  图片 2如图,出现了近乎上述的消息,那么,安装成功。

设置进程告一段落。

接下去,伊始创办项目。

依旧在命令行程序中操作 ↓

【这一步依照喜好,自由支配是或不是须要,并随便支配输入内容:在开立项如今,在命令行程序中输入 
cd d:\文书档案 步入 d盘 的 文档文件夹内。那样就足以将上面步骤创设的品类,创造在 d盘 的 文书档案文件夹内。当然,如上所述,自由支配项目创设的门路。】

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

在vue.js官方网站看教程。稍等,会一步一步出现如下消息:

图片 3

坚守提示,落成就能够。

那儿,项目创设完毕。

初阶设置重视:

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

  命令行程序中输入 cnpm install
(使用cnpm的缘故同地点的cnpm)。回车,等待安装实现。

在vue.js官方网站看教程。那时候,项目文件夹目录内,应该早已有了 node_modules
文件夹,那么,恭喜!信Ryan装到位。

不出意外的话,项目应当早已搭建达成了。

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

图片 4

在vue.js官方网站看教程。出现上述消息后,系统将机关张开浏览器(地址为:
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

 

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图