初识vue

本文主要介绍一下使用npm搭建vue脚手架。(以下是windows系统下的操作,win7+)

1. npm是个命令行工具,在搭建vue脚手架之前首先要安装node.js  下载地址为 https://nodejs.org/en/,如下图

左边的8.11.3是我写博文这个时候的最稳定版本, 生产环境请下载这个,实验学习阶段随意。右边是当前最新版本。下载完成后,点击安装文件然后下一步下一步就可以了,比较简单。

另外, vue官网有详细的搭建命令介绍: http://doc.vue-js.com/v2/guide/installation.html

2. 接下来我们打开dos 输入命令 安装最新稳定版本的vue  :  $ npm install vue

3.我们使用vue提供的官方命令行工具来快速搭建

首先 需要 全局安装 vue-cli  输入命令如下: $ npm install --global vue-cli   dos命令执行如下图所示

然后 创建一个基于 webpack 模板的新项目  输入命令如下:$ vue init webpack 项目名称

dos不动的时候,建议一直敲回车  表示安装附带的一些插件(也可以选N,后期有需要的话也可以再安装,但是建议一直选yes就好),如下图所示:

如上图,看到黄色的命令代表已经安装完成,但是需要注意的是,命令行工具里还有一个 cd 项目名称 ,是进入指定目录的意思

然后再输入 npm run dev 运行项目,  命令执行完之后如下图所示,

浏览器访问上图中地址  就可以看到如下图所示的页面

(注意哈,上面的dos别关闭,这个时候关闭了项目就停止运行了!)

搭建的项目如下图所示

以上,我们就完成了vue项目的脚手架的搭建。

关于更多vue知识,未完待续。。。

原文地址:https://www.cnblogs.com/shimeng123/p/9228797.html

时间: 2024-10-30 03:03:58

初识vue的相关文章

初识 vue —— 最简单的前后端交互示例

一.初识 vue 时的困惑 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳永

初识vue 2.0(4):vuex组件通信

0,本来想只用vue就可以做项目了,后来发现不行:一个网页被切分成若干个组件,组件之间是需要数据传递的,因此引入了vuex这个集中式存储.管理的状态管理模式. 1,安装vuex: npm install --save vuex 在main.js中引入: import Vuex from 'vuex' Vue.use(Vuex) 2,创建数据源文件vuex/store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) co

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 2.0(3):Ajax请求

0,模拟ajax请求,需要构建web程序,使用express 方便快捷. 1,安装express 构建web server: npm install -g express npm install -g express-generator 2,创建 express 项目: express myserver cd myserver npm install 3,启动项目,一般情况下可以使用: npm start 但开发环境需要监控代码变动并自动重启进程,因此需要安装 supervisor. npm i

初识Vue.js

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

初识vue 2.0(2):路由与组件

1,在上一篇的创建工程中,使用的的模版 webpack-simple 只是创建了一个简单的demo,并没有组件和路由功能,此次采用了webpack模版,自动生成组件和路由.^_^ 在模版初始化时,因为ESLint语法检查过于严格,可以暂时不要开启. vue init webpack myapp ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? Ye

Vue 初识Vue

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" cont

第一章 初识Vue

一 前提 引入vue.js: <script src="https://unpkg.com/vue/dist/vue.js"></script> 二 数据渲染方式 {{}} v-bind 1 {{}} 可以通过这种简洁的模板语法来声明式的将数据渲染进 DOM: <div id="app">{{msg}}</div> var app = new Vue({ el:'#app', data: { msg:'resume v

一、初识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 自