必赢手机app下载 / Blog / 必赢手机app下载 / Vue安装以及Vue项目创建以及Vue
图片 12

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

前段时间一直在就学Vue.js框架。

因为原先从未前面二个项指标阅历,也没学过怎样前端框架,所以,对于vue.js的求学某些手足无措。

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

此间记录下搭建进度(教程参照他事他说加以考察互联网各前辈提供的材料):

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

  安装到位后,直接在命令行程序(win + 奥迪Q5 => 输入
cmd)中输入 node -v
验证是还是不是安装成功。

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

安装Tmallnpm镜像(在本国天猫商城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 (项目文件夹名自定义),回车。

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

图片 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

 

发表评论

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

相关文章

网站地图xml地图