初识vue.js,我的学习之路(一)

在以前做项目时经常是新建一些html、css、等一些文件,但在接触了vue.js之后我发现我已经有点看不懂前端了,这对于我这么一个菜鸟来说实在是很苦逼的事情。现在的前端技术都离不开npm包去管理编译流程,npm是node.js的包管理工具,vue脚手架的搭建也是需要npm进行操作,所以学习vue之前必须要了解node.js。重点是npm的安装与使用,那么首先我们就要下载一个node.js.

   一、安装node.js

可以直接到node.js的官网下载安装,选好跟自己电脑对应的系统版本进行安装,安装过程也没什么说的就是一直下一步,如果你会安装QQ,那么你一定会安装node.js。

安装完之后打开自己的命令行工具(如果你问我命令行是什么怎么打开,请出门左拐),输入 node-v和npm-v 如果能显示出版本号就说明安装成功了。

二、vue脚手架的搭建

  安装完node之后我们就可以使用npm安装 vue-cli了,直接全局安装。

npm install vue-cli -g

因为使用npm下载东西访问的是外网需要FQ速度会很慢,所以推荐大家使用国内的良心淘宝镜像,也就是cnpm来进行安装。

可自行进入cnpm的官网,但是要注意一点安装完cnpm之后一定要使用 cnpm-v 查看版本号,否则有可能会安装不成功。cnpm的使用就是把npm换成cnpm即可。

安装完vue-cli之后就是vue项目的搭建了

三、搭建项目

vue init wepack demo1  或者 vue init  webpack-simple demo1

其中demo1是项目的名字,这个你可以随便取 aaa、bbb都可以,那么webpack与weppack-simple有什么区别呢?其实基本上没有什么区别,但是你用webpack的话它会有代码格式的检查,不符合它的标准就会报错,如果你想让自己的代码看上去工整养成这个习惯,你就用webpack。除此之外两种生成的配置文件名称也不一样,一个是index.js,一个是webpack.config.js。

运行命令之后一直回车、回车但是不要太猛,中间会问你是否需要sass?你可以要或者不要。

然后下面会提示你怎么做    cd demo1 进入项目文件,npm install 安装项目依赖,执行 npm run dev 自动打开页面。

出现这个页面那就大功告成了!

时间: 2024-10-11 16:16:27

初识vue.js,我的学习之路(一)的相关文章

Vue学习系列(一)——初识Vue.js核心

前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一处需要动态更新的DOM节点创建一个指令对象.每当一个指令对象观测的数据变化时,它便会对所绑定的目标节点执行相应的DOM操作.基于指令的数据绑定使得具体的DOM操作都被合理地封装在指令定义中,业务代码只需要涉及模板和对数据状态的操作即可,这使得应用的开发效率和可维护性都大大提升. 因此,数据绑定,组件

一、初识Vue.js

1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .webpack以及前端上线部署集成工具如: grunt.gulp.fis等. Vue.js与reactjs相似,是一个构建数据驱动的 web 界面的库,一个注重ViewModel的典型的MVVM框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自

Vue.js 源码学习之Flag篇

The Progressive JavaScript Framework --vuejs.org 起因 第一次接触 Vue.js 是因为要做一个通讯录的外包项目,这个项目要有前台展示和中后台管理,从轮子做起肯定是不明智的选择,所以当时初步定下的是 Vue.js + Element UI 的技术栈. 项目过程很漫长,因为给的钱实在是可有可无,权当是学习了. 项目的接口是交给了同学. 整个项目采用的是钱后端分离的开发模式,我做我的页面,他做他的接口. 项目出了两个版本,做的时候,中间就强行的看文档.

vue.js随笔记---初识Vue.js(2)

环境搭建(推荐使用vue.js官方提供的命令行工具,用于快速搭建大型单页面应用,包含:vue.js的一个框架爱,vue.js打包工具,测试的工具,开发调试的服务器等): 1.npm:node.js的一个包管理工具,npm在国内使用会很慢,可以使用淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm安装成功检测:cnpm -v回车可看到版本号则表示安装成功! 2.vue-cli安装(vue-cli相当于脚

vue.js随笔记---初识Vue.js

1.基础要求: 1.1 HTML CSS JAVASCRIPT 1.2 模块化基础 1.3 Es6初步了解 2.vue.js 轻量级的MVVM模式框架,他同时吸收了recat和angular的优点,他强调了recat组件化的概念,可以轻松实现数据和展现的分离,吸收了angular灵活的指令和页面操作的一些方法,但是相对于这两者,更简单易学,容易上手. 3.10s看懂vue.js A: <div id="demo"> <p>{{msg}}</p> &l

Vue.js 源码学习笔记 -- 分析前准备 待续

主体 实例方法归类: data     数据方法 dom     dom方法 event    事件处理 lifecycl   生命周期函数 init 初始化vue页面 全局方法: derectives filters init过程 data : observer deps computed watch || watcher template: fragment [ directive repeat if component transition filter ] 重点: 把数据(Model)

Vue.js 2.0 学习重点记录

Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 ECMAScript 5 的浏览器. Vue.js安装 安装方式有两种: 1.直接下载用script标签引入(推荐引入开发版本,压缩版本会失去错误提示和警告) 2.使用cdn方法引入 3.npm安装 npm安装的前提需要安装了nodejs,这里推荐nvm安装nodejs 附上一小段nvm使用的命令: $ n

初识Vue.js

一 ,什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接.修改和扩大,构成所要求的系统.)Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 二,声明式渲染. Vue.js 的核心是一个

vue.js源码学习分享(一)

今天看了vue.js源码  发现非常不错,想一边看一遍写博客和大家分享 /** * Convert a value to a string that is actually rendered. *转换一个值为字符串 */ function _toString (val) { return val == null? '': typeof val === 'object'? JSON.stringify(val, null, 2): String(val)//如果该值是null则返回空字符串,如果该