Vue脚手架的简单使用实例

2024-11-27 07:07:48

提前申明

注意：自己对vue脚手架的理解和认识，很多东西和理解都是形象上的手法，并不专业和官方

webpack

一种项目构建工具，可以将css和js压缩成一个文件。此外，可以提供测试用服务器。使用webpack时，可以配置一些默认扩展名和路径别名来在项目文件里直接使用

导入和导出

使用export命令可以将一个JS对象导出，其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用，但是在导入时，必须知道导入导出对象的名字。如果使用export default命令导出对象的话，其他JS文件在导入时就无需知道导出对象的名字，可以自定义对象名

ps：export和import为es6规范中的关键字，目前仅被少量JS运行平台实现，在脚手架里会被自动用babel转换成es5对应

语法组件中自定义标签名的大小写问题

在大多数浏览器解析HTML时，不区分标签的大小写。自定义标签中的大写字母会被自动转换为小写字母，如<First></First>会被转换为 first 标签，因此导致与注册时提供的标签名不一致，出现组件未正确注册的错误。

如果使用自定义组件时，代码写在template标签里，在解析时就会被当做JS解析，是区分大小写的。

组件的另外一种写法

<body>

<template id="first-c">
  <!--template以下才是组件的HTML模板，仍然只能有一个根标签-->
  <div>这是我第一个组件</div>
</template>
<div id="app">
  <first></first>
</div>
<script>
  var myTemplate = {
    template:"#first-c"
  }

  Vue.component("first",myTemplate);
  var app = new Vue({
    el:"#app"
  });
</script>
</body>

使用脚手架创建项目安装NodeJS

脚手架的安装及运行均依赖NodeJS，可以在命令行键入node -v来查看是否安装NodeJS。

下载NodeJS

配置npm全局路径

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
之后将第一个路径同时配置到环境变量path中。

配置淘宝npm镜像

npm config set registry https://registry.npm.taobao.org

安装vue-cli

在命令行中执行npm install -g vue-cli。

创建模板项目

//vue init 模板名 项目名

vue init webpack simple

模板名可以在 https://github.com/vuejs-templates查看，推荐使用webpack。

之后使用cd 项目名进入项目根目录，使用npm install来自动安装项目依赖。

其他常用命令

项目根目录下执行npm run dev可以测试运行项目，执行npm run build可以正式编译项目到dist目录下。

目录结构

单文件组件

<template>
  <!--template以下才是组件的HTML模板，仍然只能有一个根标签-->
  <div>
    我是一个单文件组件
  </div>
</template>

<script>
export default {
  //无需写template，data仍然以函数返回，其他属性照旧
  data(){
    return {
    }
  },
  props:[],
  methods:{
  }
}
</script>

<!--这个scoped可以让这些样式仅在当前组件生效-->
<style scoped>

</style>

补充：在Vue脚手架中使用jquery和其他框架

在项目根目录安装jquery npm install jquery（注意大小写，jquery和jQuery不一样）。

build目录下的webpack.base.conf.js

开头加入

const webpack = require("webpack")

module.exports的最后加入（注意JS代码格式，不要忘了写逗号）

plugins: [
  new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  })
]

之后，需要使用jquery的组件中导入juuery，如

<script>
  import $ from 'jquery'
  export default{
    data(){
      return {
        users:null
      }
    },
    created(){
      $.get("http://127.0.0.1:3000/all_user",function(data){
        this.users = data;
      }.bind(this))
    }
  }
</script>

使用其他js框架的方法链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

手把手教你使用vue-cli脚手架(图文解析)

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑,特此写了一篇搭建环境的教程,每一步尽量详细解析.需要的朋友可以过来参考下. vue-cli脚手架的优势: 有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目. vue-cli是官方支持的一个脚手架,会随本版本进行迭代更新. vue-cli提供了一套本地的nod
用vue快速开发app的脚手架工具

前言多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本文最大特点: webpack4 多页面跨域Proxy代理 VConsole移动端调试,手机上的开发者工具 es6/es7 babel 转换项目地址 GitHub 使用手册 MogoH5+ 是一个 vue 多页面脚手架工具 ,结合 H5+可以快速开发安卓与苹果 APP. 即使不适用 Hbuild
全新打包工具parcel零配置vue开发脚手架

parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上项目地址: https://github.com/w3c-king/parcel-vue 初始化项目 $ git clone https://github.com/w3c-king/parcel-vue.git 安装依赖 $ cd parce-vue $ npm install 其中 parcel-bundler 是主要的工具,对于 vue 结尾的单文件,需要单独处理文件类型,
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

一.Vue的实例 1.1.创建一个 Vue 的实例每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项
vue脚手架及vue-router基本使用

首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化的一个工具,对于刚接触的新手们建议关闭,不然代码写的不符合它的规范你的编译器会一直报错,如下图安装好脚手架之后就像这样终端输入npm run dev,然后打开localhost:8080就可以看到项目运行啦大致分析一下几个比较常用的文件把,如下图 1.bu
详解vue组件开发脚手架

generator-vue-component可以快速生成自己的组件开发的脚手架,类似于vue-cli生成vue项目,这脚手架是目录结构是方便组件开发和调试由于脚手架是由yeoman搭建,所以必须全局安装yeoman npm install yo 然后全局安装generator-vue-component npm install generator-vue-component -g 到项目目录,获取对应的开发模板 yo vue-component-developer 运行上面命令会弹出下面,依
vue脚手架中配置Sass的方法

世界上最成熟.最稳定.最强大的专业级CSS扩展语言! 兼容CSS Sass完全兼容所有版本的CSS.我们对此严格把控,所以你可以无缝地使用任何可用的CSS库. 特性丰富 Sass拥有比其他任何CSS扩展语言更多的功能和特性.Sass核心团队不懈努力,一直使其保持领先地位. 成熟 Sass已经经过其核心团队超过8年的精心打造. 行业认可一次又一次地,行业把Sass作为首选CSS扩展语言. 社区庞大数家科技企业和成百上千名开发者为Sass提供支持. 框架有无数的框架使用Sass构建.比如Com
vue脚手架搭建过程图解

vue脚手架是个好东西,能够快速搭建vue单页面应用,vue是基于node环境的,所以要先安装node,去官网下载安装就可以. 进入某个文件夹的命令为: 查看node版本: 搭建步骤为: 出现下图说明搭建成功: 按照提示输入: 如果出现下图说明运行成功: 在浏览器中按照指示输入: 运行结果为: ok,至此vue脚手架就搭建完成了! 总结以上所述是小编给大家介绍的vue脚手架搭建过程图解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!
Vue脚手架的简单使用实例

提前申明注意:自己对vue脚手架的理解和认识,很多东西和理解都是形象上的手法,并不专业和官方 webpack 一种项目构建工具,可以将css和js压缩成一个文件.此外,可以提供测试用服务器.使用webpack时,可以配置一些默认扩展名和路径别名来在项目文件里直接使用导入和导出使用export命令可以将一个JS对象导出,其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用,但是在导入时,必须知道导入导出对象的名字.如果使用export default命令导出
vue服务端渲染操作简单入门实例分析

本文实例讲述了vue服务端渲染操作.分享给大家供大家参考,具体如下: 想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务端渲染到底是杂么回事!!! 一,首先实现下官网的基本案例随便建一个目录,然后执行npm init初始化项目,生成工程文件package.json:创建server.js:然后按照vue-ssr官方链接:https://ssr.v
vue中的非父子间的通讯问题简单的实例代码

官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>
基于vue.js路由参数的实例讲解——简单易懂

vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件首先在我们项目中安装vue-router路由依赖第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数接着给映射表中的路由设
vue.js的简单自动求和计算实例

一.导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> 二.前端页面我用了一个表格,话不多说直接上代码 <div id="vuetest"> <table> <tr> <td>数学</td>
vue实现一个简单的分页功能实例详解

这是一个简单的分页功能,只能够前端使用,数据不能通过后台服务器进行更改,能容已经写死了. 下面的内容我是在做一个关于婚纱项目中用到的,当时好久没用vue了,就上网区找了别人的博客来看,发现只有关于element_ui的,基本全是,对自己没用什么用,就自己写了一个,效果如下: 点击相应的按钮切换到对应的内容内容: 下面我只发核心代码,css样式就不发了,自己想怎么写怎么写  <ul class="blog-lists-box"> <
使用Vue完成一个简单的todolist的方法

看了两天的Vue,还是上手写一个简单的todolist更实用(文末有彩蛋). 一.使用vue-cli脚手架快速搭建一个框架利用vue-cli来自动生成我们项目的前端目录及文件,方法: npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev 这样我们的一个基于webpack的vue项目目录就可以快速构建好了. 目录如下: 二.完成一个简单的todolist 接下来就看一下we
vue的toast弹窗组件实例详解

相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 1.一般都是多处使用 --需要解决每个页面重复引用+注册 1.一般都是跟js交互的 --无需在 <template> 里面写 <toast :show="true" text="弹窗消息
一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）

Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api. 本文将详细介绍关于利用webpack搭一个vue脚手架的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.适用人群 1.对webpack知识有一定了解但不熟悉的同学. 2.女同学!!!(233333....) 二.目

Vue脚手架的简单使用实例

相关推荐

随机推荐