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相当于脚手架,可以帮你自动生成模板工程)

cnpm install -g vue-cli

苹果电脑若有权限问题则使用下面的方法(命令前加上"sudo"):

sudo cnpm install -g vue-cli

vue-cli安装成功校验:再次输入vue时,不再提示不是内部命令,而是能看到vue本身变成了一种命令

3、创建一个基于“webpack”压缩和打包的一个项目,需要创建项目的目录下打开cmd:

vue init webpack my-project

创建过程中全部输入"y"进行确认,项目名称和描述可以自行输入.

4、创建成功后可在选择的文件夹里看到vue帮助你创建好的一个项目,将cmd进入到该项目中,安装项目开发依赖:

cnpm install

安装成功后项目目录中的node_modules文件夹中将出现很多依赖库(具体安装了哪些依赖可到项目根目录下的package.json中查看)

5、项目运行:

cnpm run dev

vue会起一个服务,在浏览器中打开当前项目,在项目编辑过程中,只需要保存,页面上不需要刷新就会更新相应的内容,这就是vue脚手架提供的功能之一。

vue创建的模板项目是vue官网的一个首页,这样,接下来就可以在模板的基础上更换上自己的内容啦 希望小伙伴创建成功,过程中遇到问题也希望多多沟通,还请各位大神指教:)

时间: 2024-12-12 09:18:46

vue.js随笔记---初识Vue.js(2)的相关文章

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系列之一初识Vue

在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助 1.Vue.js !important 2.界面之下:还原真实的MV*模式 !important 3.web前端优化之reflow(减少页面的回流) 4.深度剖析:如何实现一个 Virtual DOM 算法 本系列文章是基于官方文档,整理的,旨在让新手快速上手.学习vue.js需要一定基础. 一.声明式渲染 1.实现Hello World的功能 还是熟悉的Hello World,下面用Vue.js的声明式渲染来实现 <

Vue.js实战:初识Vue.js

一.Vue.js是什么 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用. 简单小巧指的是Vue.js 压缩后大小仅有17KB 所谓渐进式(Progressive)就是你一步一步,有阶段性地来使用Vue.js,不必一开始就使用所有的东西. 使用Vue.js可以让Web开发变得简单,同时也颠覆了传统前端开发模式. 二.MVVM模式 与知名前端框架Angular.Ember 等一样,Vue.js在设计上也使用MVVM(Model-View-View-Model )模式. MVVM模式是有经典的软

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

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

vue学习笔记初识vue——使用HTML模板

在创建Vue实例时,如果声明了el配置项,那么你也可以省略template 选项.这时候,Vue.js将提取锚点元素的HTML内容,做为模板. 我们可以使用单一的el配置项来创建Vue实例: var vm = new Vue({el:'#app'}); 在Vue.js中,这种模板被称为HTML模板,而使用template配置项 书写的模板,被称为字符串模板. 工作原理 当Vue.js发现你提供的选项中没有template属性时,将提取el属性所 指定的DOM节点的outerHTML内容作为模板内

Sea.js学习1——初识Sea.js

Sea.js 是一个成熟的开源项目,核心目标是给前端开发提供简单.极致的模块化开发体验. 使用 Sea.js,在书写文件时,需要遵守 CMD (Common Module Definition)模块定义规范.一个文件就是一个模块. define(function(require, exports) { exports.each = function (arr) { // 实现代码 }; exports.log = function (str) { // 实现代码 }; }); 通过 export

node.js学习笔记目录

1.node.js学习笔记(1)--Node.js简介及环境安装 2.node.js学习笔记(2)--使用Express快速创建应用 3.node.js学习笔记(3)--Express创建的项目分析 4.node.js学习笔记(4)--使用Express完成简单的登陆 5.node.js学习笔记(5)--MongoDB下载及安装 6.node.js学习笔记(6)--MongoDB简单入门 7.node.js学习笔记(7)--Node.js与MongoDB简单交互 8.node.js学习笔记(8)

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

Vue.js学习笔记(7)组件详解

在这篇文章之前小颖分享过小颖自己写的组件:Vue.js学习笔记(5)tabs组件和Tree升级版(实现省市多级联动) 先给大家看下小颖写了一个简单的组件示例: 组件: <template> <div class='content' v-if='showFlag'> <input type="text" v-bind:style='{ width:compwidth+"px"}' v-model='compvalue' @keyup='m