xml地图|网站地图|网站标签 [设为首页] [加入收藏]
来自 每日资讯 2019-09-28 16:45 的文章
当前位置: 新濠国际登录平台 > 每日资讯 > 正文

新濠国际登录平台在vue.js官网看教程,非常容易

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

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

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

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

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

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

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

  安装完成后,直接在命令提示符(win + R => 输入 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就是表示使用淘宝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

 

这几天一直在学习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。

Vue.js是一个MVVM模式的框架,如果读者有angular经验,一定能够很快入门Vue的

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

vue.js的特点:

  新濠国际登录平台 13如图,node -v后输出了版本号“v6.11.4”,安装成功。

易用: 已经会了HTML,CSS,JavaScript?即刻阅读指南即可开始构建应用!

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

灵活: 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

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

高效: 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化

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

二、环境搭建

  新濠国际登录平台 14如图,出现了类似以上的信息,那么,安装成功。

vue推荐开发环境:

安装过程告一段落。

新濠国际登录平台,Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

接下来,开始创建项目。

npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(

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

$ npm install -g cnpm --registry=

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

webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

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

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

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

三、安装node.js

新濠国际登录平台 15

从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具,输入node -v,如下图,如果出现相应的版本号,则说明安装成功。

按照提示,完成即可。

新濠国际登录平台 16

此时,项目创建完成。

npm包管理器,是集成在node中的,所以,直接输入npm -v就会如下图所示,显示出npm的版本信息。

本文由新濠国际登录平台发布于每日资讯,转载请注明出处:新濠国际登录平台在vue.js官网看教程,非常容易

关键词: