这几天一贯在攻读Vue.js框架。

这几天平素在上学Vue.js框架。

Vue项目搭建记录,vue项目搭建

这几天平素在上学Vue.js框架。

因为原先不曾前者项目标阅历,也没学过什么前端框架,所以,对于vue.js的求学有些不知道该如何做。

在vue.js官网看教程,依据教程指导,可以不用脚手架开发,也足以搭建开发条件。

那边记录下搭建进程(教程参考网上各前辈提供的素材):

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

  安装落成后,直接在命令指示符(win + 途锐 => 输入 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就是意味着使用Taobaonpm镜像,若接纳官方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

Vue项目搭建记录,Vue安装以及Vue项目创设以及Vue。然后,打开下图目录内的 mainfest.json 文件。

澳门金沙国际 8

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

澳门金沙国际 9

保存。

打开 Google Chrome。

在网址栏输入 chrome://extensions 打开增添程序。

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

澳门金沙国际 10

选择chrome文件夹。

澳门金沙国际 11

安装到位。

效果图:

澳门金沙国际 12

 

这几天一贯在就学Vue.js框架。
因为从前没有前者项目标经验,也没学过什么前端框架,所以,对于vue.js的学…

一、简介

因为之前没有前者项目标经验,也没学过什么前端框架,所以,对于vue.js的学习有些恐慌。

澳门金沙国际,因为原先不曾前者项目标经验,也没学过什么前端框架,所以,对于vue.js的读书有些手足无措。

Vue.js 是什么

在vue.js官网看教程,根据教程指导,可以毫不脚手架开发,也足以搭建开发条件。

在vue.js官网看教程,依据教程指导,可以毫不脚手架开发,也得以搭建开发环境。

Vue.js(读音 /vjuː/, 类似于 view)
是一套营造用户界面的渐进式框架。与其他重量级框架差其他是,Vue
选用自底向上增量开发的安排。Vue
的大旨库只关心视图层,并且卓殊容易学习,万分简单与别的库或已有品种组成。另一方面,Vue
完全有力量驱动采纳单文件组件和Vue生态系统协理的库开发的繁杂单页应用。

此间记录下搭建进度(教程参考网上各前辈提供的材料):

此地记录下搭建进程(教程参考网上各前辈提供的素材):

Vue.js 的靶子是透过尽或者简单的 API
完结响应的数量绑定组合的视图组件

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

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

Vue.js是一个MVVM方式的框架,假使读者有angular经验,一定可以高效入门Vue的

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

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

vue.js的特点:

  澳门金沙国际 13如图,node
-v后输出了版本号“v6.11.4”,安装成功。

  澳门金沙国际 14如图,node
-v后输出了版本号“v6.11.4”,安装成功。

易用: 已经会了HTML,CSS,JavaScript?马上阅读指南即可开首构建利用!

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

设置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命令行工具(Vue-CLI):命令行程序内输入 cnpm install -g vue-cli
(此处输入cnpm就是意味使用天猫npm镜像,若使用官方npm,则输入 npm install
–global vue-cli),回车,等待安装到位。

火速: 16kb min+gzip 的运行大小,超快虚拟 DOM ,最便捷的优化

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

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

二、环境搭建

  澳门金沙国际 15如图,出现了近似上述的新闻,那么,安装成功。

  澳门金沙国际 16如图,出现了类似上述的新闻,那么,安装成功。

vue推荐开发条件:

设置进程告一段落。

设置进程告一段落。

Node.js: javascript运行条件(runtime),不相同系统一贯运行各类编程语言

接下去,起初创办项目。

接下去,初叶创办项目。

npm:
Nodejs下的包管理器。由于国内使用npm会很慢,那里推荐应用天猫商城NPM镜像(

或许在命令行程序中操作 ↓

仍旧在指令行程序中操作 ↓

$ npm install -g cnpm
–registry=

【这一步依据喜好,自由支配是不是要求,并肆意支配输入内容:在成立项近来,在指令行程序中输入 
cd d:\文档 进入 d盘 的 文档
文件夹内。那样就可以将上面步骤成立的花色,成立在 d盘 的 文档
文件夹内。当然,如上所述,自由支配项目开创的路子。】

【这一步依照喜好,自由支配是不是须要,并私下支配输入内容:在创立项近来,在命令行程序中输入 
cd d:\文档 进入 d盘 的 文档
文件夹内。那样就可以将上边步骤成立的项目,创设在 d盘 的 文档
文件夹内。当然,如上所述,自由支配项目创立的路子。】

webpack: 它根本的用处是透过 CommonJS
的语法把具备浏览器端需求揭发的静态资源做相应的备选,比如资源的会师和包裹。

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

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

vue-cli: 用户生成Vue工程模板

稍等,会一步一步出现如下音讯:

稍等,会一步一步出现如下音讯:

三、安装node.js

澳门金沙国际 17

澳门金沙国际 18

从node.js官网下载并安装node,安装进程很不难,一路“下一步”就可以了(傻瓜式安装)。安装到位之后,打开命令行工具,输入node
-v,如下图,若是出现相应的本子号,则证实安装成功。

依据指示,落成即可。

奉公守法指示,已毕即可。

澳门金沙国际 19

此刻,项目开创完毕。

那会儿,项目开创落成。

npm包管理器,是合而为一在node中的,所以,直接输入npm
-v就会如下图所示,呈现出npm的版本新闻。

发端设置看重:

起来设置器重:

澳门金沙国际 20

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

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

OK!node环境已经安装已毕,npm包管理器也有了。由于有些npm有些资源被挡住大概是国外资源的原委,平常会造成用npm安装重视包的时候失败,所有作者还亟需npm的境内镜像—cnpm。

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

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

安装cnpm

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

那时候,项目文件夹目录内,应该已经有了 node_modules
文件夹,那么,恭喜!看重安装已毕。

在命令行中输入npm install -g cnpm
–registry=

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

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

澳门金沙国际 21

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

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

成就将来,我们就足以用cnpm代替npm来设置重视包了。尽管想进一步询问cnpm的,查看Tmallnpm镜像官网。

澳门金沙国际 22

澳门金沙国际 23

安装vue-cli脚手架创设工具

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

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

在命令行中运行命令npm install -g
vue-cli,然后等待安装完毕。通过以上三部,大家要求预备的环境和工具都准备好了,接下去就早先采取vue-cli来创设项目。

综上!

综上!

用vue-cli营造项目要开创项目,首先大家要选定目录,然后再命令行中把目录转到选定的目录。在此地,作者接纳桌面来存放在新建的种类,则我们必要先把目录cd到桌面,如下图。

(以上Win10 64系统)

(以上Win10 64系统)

澳门金沙国际 24

 

 

在桌面目录下,在指令行中运行命令vue init webpack
firstVue。解释一下这些命令,这些命令的意思是初步化一个门类,其中webpack是营造工具,也等于整整项目是基于webpack的。其中firstVue是成套项目文件夹的称号,这些文件夹会自动生成在你指定的目录中(笔者的实例中,会在桌目生成该文件夹),如下图。

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

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

澳门金沙国际 25

 

 

运作开始化命令的时候回让用户输入多少个中央的选项,如项目名称,描述,我等新闻,虽然不想填直接回车暗中认可就好。

Vue Devtools 安装:

Vue Devtools 安装:

澳门金沙国际 26

点击 Vue Devtools
进入下载页面。

点击 Vue Devtools
进入下载页面。

开辟firstVue文件夹,项目文件如下所示。

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

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

澳门金沙国际 27

澳门金沙国际 28

澳门金沙国际 29

那就是全方位项目标目录结构,其中,我们第一在src目录中做修改。那几个类型以后还只是一个结构框架,整个项目须要的器重资源都还尚无安装,如下图。

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

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

澳门金沙国际 30

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

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

设置项目所需的依靠要安装看重包,首先cd到花色文件夹(firstVue文件夹),然后运行命令cnpm
install,等待安装。

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

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

澳门金沙国际 31

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

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

设置完毕今后,会在大家的花色目录firstVue文件夹中多出一个node_modules文件夹,那里边就是我们项目需要的借助包资源。

  澳门金沙国际 32

  澳门金沙国际 33

澳门金沙国际 34

 

 

安装完依赖包之后,就足以运作总体项目了。

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

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

运行品种在类型目录中,运行命令npm run
dev,会用热加载的点子运行大家的行使,热加载可以让大家在改动完代码后不要手动刷新浏览器就能实时看到修改后的效果。

澳门金沙国际 35

澳门金沙国际 36

澳门金沙国际 37

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

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

此处差不离介绍下npm run
dev命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,约等于node
build/dev-server.js命令的一个神速方式。项目运作成功后,浏览器会自行打开localhost:8080(如若浏览器没有自动打开,能够手动输入)。运行成功后,会看出如下所示的界面。

澳门金沙国际 38

澳门金沙国际 39

澳门金沙国际 40

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

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

上述就是本文的全部内容,希望对大家的就学抱有支持,也冀望我们多多扶助脚本之家。

澳门金沙国际 41

澳门金沙国际 42

您大概感兴趣的文章:

  • Vue.js简易安装和便捷入门(第二课)
  • Vue学习笔记进阶篇之vue-router安装及运用形式
  • Vue学习笔记进阶篇之vue-cli安装及介绍
  • 详解在vue-cli项目中装置node-sass
  • 手把手搭建安装基于windows的Vue.js运行条件
  • 详解vue.js的devtools安装
  • 详解使用nodeJs安装Vue-cli
  • vue.js从安装到搭建进度详解
  • vue.js开发条件设置教程
  • 值得珍藏的vuejs安装教程

保存。

保存。

打开 Google Chrome。

打开 Google Chrome。

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

在网址栏输入 chrome://extensions 打开增加程序。

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

勾选开发者情势,并点击 ”加载已解压的开展程序…“ 按钮。

澳门金沙国际 43

澳门金沙国际 44

选择chrome文件夹。

选择chrome文件夹。

澳门金沙国际 45

澳门金沙国际 46

安装完结。

安装完毕。

效果图:

效果图:

澳门金沙国际 47

澳门金沙国际 48

 

 

相关文章