使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析

安装环境

  • 安装node.js并配置环境变量
  • 安装淘宝镜像，npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装webpack，cnpm install webpack -g
  • 安装脚手架npm install vue-cli -g

创建项目

在硬盘上找一个文件夹放工程用的，在终端中进入该目录,cd目录路径
根据模板创建项目,vue init webpack-simple 工程名字<工程名字不能用中文>，vue init webpack 工程名字<工程名字不能用中文>,

模板解读

  • cd进入创建的工程目录
  • 安装项目依赖，npm install,不要使用cnpm install安装（会导致后面缺了很多依赖库）
  • 安装 vue 路由模块vue-router和网络请求模块vue-resource，cnpm install vue-router vue-resource --save
  • 启动项目 npm run dev,启动完毕后，在浏览器输入http://localhost:8080,就能看到初始界面了

总结

以上所述是小编给大家介绍的使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解Vue使用 vue-cli 搭建项目

    详解Vue使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli  一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功.  二.安装 vue-cli 安装好了 node,我们可以直接全局安装 vue-

  • 深入理解Vue-cli搭建项目后的目录结构探秘

    我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧! 一.前言 这里先说一下使用vue-cli之前的事情. 由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸) ├── css ├── images ├── index.html

  • 详解vue-cli项目中用json-sever搭建mock服务器

    详解vue-cli项目中用json-sever搭建mock服务器

    vue-cli下配置json-server 使用json-server实现后台数据接口 先建一个json文件:db.json 放在build/下 在build/dev-server.js中配置 (注意变量命名) github说明: 启动项目 地址栏输入 localhost:8081 服务已启动成功 8081后加相应后缀即可访问数据 localhost:8081/posts l localhost:8081/comments 最后做一下浏览器代理 设置config/index.jsr如下 最后验证

  • windows下vue-cli及webpack搭建安装环境

    windows下vue-cli及webpack搭建安装环境

    1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm

  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    详解如何使用vue-cli脚手架搭建Vue.js项目

    1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明. 2. 安装 前提条件,Node.js >=4.x版本,建议使用6.x版本.npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init

  • 使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析

    安装环境 安装node.js并配置环境变量 安装淘宝镜像,npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack,cnpm install webpack -g 安装脚手架npm install vue-cli -g 创建项目 在硬盘上找一个文件夹放工程用的,在终端中进入该目录,cd目录路径 根据模板创建项目,vue init webpack-simple 工程名字<工程名字不能用中文>,vue init

  • Vue官方推荐AJAX组件axios.js使用方法详解与API

    Axios.js作为Vue官方插件的AJAX组件其主要有以下几个特点: 1.比Jquery轻量,但处理请求不多的时候,可以使用 2.基于Promise语法标准 3.支持nodejs 4.自动转换JSON数据 Axios.js用法 axios提供了一下几种请求方式 axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[,

  • 简单了解Vue + ElementUI后台管理模板

    最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue-element-admin 官网介绍 vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现.它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产

  • 用Vue.js方法创建模板并使用多个模板合成

    在vue.js定义模板时,可以定义多个模板,然后在components组件中调用模板,显示在界面上,注意components后面是一个对象,而不是数组.下面利用实例说明,操作如下: 第一步,在HBuilderX设计工具中,在指定的文件目录下新建一个静态页面,并引入vue.js核心文件,如下图所示: 第二步,在<body></body>标签内,插入一个div标签,并设置对应的ID属性,如下图所示: 第三步,接着在div标签中插入一个script标签,定义三个模板User.Studen

  • 浅析Vue下的components模板使用及应用

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单的写一段components代码 (局部方法创造模板) <div id="app"> <haha&

  • vue实现登录注册模板的示例代码

    vue实现登录注册模板的示例代码

    模板1: login.vue <template> <p class="login"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="登录" name="first"> <el-form :model="ruleForm" :ru

  • Vue基础之MVVM,模板语法和数据绑定

    Vue基础之MVVM,模板语法和数据绑定

    目录 1. Vue概述 Vue官网 MVVM架构模式 Vue简介 2. 初识Vue 3. 模板语法 1.插值语法: 2.指令语法: 4. 数据绑定 5. el与data的两种写法 1.el有2种写法new 2.data有2种写法 3.一个重要的原则: 总结 1. Vue概述 Vue官网 英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ MVVM架构模式 MVVM简介 MVVM 由 M:Model 模型,V:View 视图 ,VM:ViewM

  • Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

  • 用Go+Vue.js快速搭建一个Web应用(初级demo)

    用Go+Vue.js快速搭建一个Web应用(初级demo)

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开发环境: 2. 安装node.js以及npm环境: Gin的使用: 为了快速搭建后端应用,采用了Gin作为Web框架.Gin是用Golang实现的一种Web框架,api非常友好,且拥有出色的路由性能和详细的错误提示,如果你想快速开发一个高性能的生产环境,Gin是一个不错的选择. 下载和安装Gin:

  • vue/vue-cli+express手把教你搭建SSR

    vue/vue-cli+express手把教你搭建SSR

    最近简单的研究了一下SSR,对SSR已经有了一个简单的认知,主要应用于单页面应用,Nuxt是SSR很不错的框架.也有过调研,简单的用了一下,感觉还是很不错.但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记. 什么是SSR 把Vue组件渲染为服务器端的HTML字符串,将他们直接发送到浏览器,最后将静态标记混合为客户端上完全交互的应用程序. 为什么要使用SSR 更好的SEO,搜索引擎爬虫爬取工具可以直接查看完全渲染的页面 更宽的内容达到时间(time-to-content),当权请

随机推荐