01 vue单文件组件 Vue-cli的使用

最新推荐文章于 2023-08-15 22:48:42 发布
最新推荐文章于 2023-08-15 22:48:42 发布
阅读量318 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41672684/article/details/119278481
版权

目录

1 单文件组件介绍

2 单文件组件

2.1  单文件组件的使用配置

2.2  多个单文件的使用

Child1.vue

App.vue

2.3  多个单文件组件通过路由的使用

3 Vue-cli的使用

页面结构说明

项目打包

1 单文件组件介绍

将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如："breadcrumb.vue"。

// 使用template标签来定义html部分
<template>
    <div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">
        当前位置是：{{ pos }}
    </div>
</template>

// javascript要写成模块导出的形式：
<script>
    export default{
        props:['pos'],
        data:function(){
            return {
                isHot:false                
            }
        }
    }
</script>

// 样式中如果有scope关键字，表示这些样式是组件局部的，不会影响其他元素
<style scoped>
.crumb{
    width:90%;
    line-height:50px;
    margin:0px auto;
    border-bottom:1px solid #ddd;
}
.hot{
    color:red;
    font-weight:bold;
    text-indent:10px;
}
</style>
powered by Gitbook

2 单文件组件

2.1  单文件组件的使用配置

1 安装node版本管理工具nvm

  1. curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
// 更新配置
source .bashrc

2 安装最新版本的node

nvm install node

3 更新npm的安装源 

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

 4 创建项目目录

mkdir project

 5 进入项目目录，初始化项目目录

cd project
npm init

 

初始化完成后在当前目录中会生成一个package.json文件，该文件指定项目所以依赖的模块 

打开VS code  

 

6 配置package.json文件

{
    "name": "project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "babel-core": "^6.22.1",
        "babel-loader": "^7.1.1",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "css-loader": "^0.28.11",
        "element-ui": "^2.7.2",
        "file-loader": "^1.1.4",
        "lodash": "^4.17.4",
        "style-loader": "^0.23.1",
        "url-loader": "^1.1.2",
        "vue": "^2.6.10",
        "vue-loader": "^15.7.0",
        "vue-router": "^3.0.2",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.2.1"
    }
}

  1. 该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

 7 安装项目依赖模块

 项目依赖模块安装以后，会在项目目录下自动生成一个node_moduls文件，和package-lock.json文件。

8  创建项目文件 main.js ,index.html, App.vue

  1. touch index.html main.js App.vue. 

可以借助vscode编辑工具创建文件

  1. index.html文件是项目的首页文件

  2. main.js 文件定义vue及调用单文件组件，也是项目打包时所依赖的文件

  3. App.vue文件为单文件组件文件

  4.  

  5. main.js 文件定义vue及调用单文件组件


     

为了再vscode中有提示功能，我们可以下载一个Vetur插件 

         

前端页面展示，发现没有效果，原因时，单文件组件需要借助于webpacke进行打包渲染

我们需要配置webpacke

9 创建webpacke打包的配置文件webpack.config.js

 在这个文件中主要看两点，入口文件（./main.js）及出口文件(index,js),

也就是说找到./main.js下对单文件组件进行渲染，渲染后的结果保存到index,js，所以我们先生成index,js文件。

打包渲染的命令为： npm run build

渲染结束后生成index,js文件，在这里我们就需要把index.html 文件中的main.js改成index,js

  1. 在通过webpack对项目进行打包时，需要指定相应的配置文件，同过配置文件对单文件组件中的各个内容进行解析，生成一个index.js的压缩文件，在index.html只需引该文件就可进行页面加载渲染

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: { main: "./main.js" }, //入口文件
    output: {
        filename: 'index.js', //出口文件名
        path: path.resolve(__dirname), //当前目录
        library: 'index' // 打包后模块的名称
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module: {
        rules: [ //定义不同类型的文件使用的loader
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                loader: 'vue-style-loader',
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                options: {
                    minimize: true //添加
                }
            }, 
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader'
              },
        ]
    }
}

我们也可以开启一个前端服务 来运行单文件组件。

2.2  多个单文件的使用

在project目录下创建components文件夹，然后将所有子组件放入components文件夹下

 

 1、多组件嵌套使用

Child1.vue

<template>
        <div>child1</div>
</template>

<script>
export default {
             
}
</script>

<style>
    

</style>

 Child2.vue

<template>
        <div>child2</div>
</template>

<script>
export default {
             
}
</script>

<style>
    

</style>

App.vue

<template>
    <div>
        单文件组件
        <!-- 调用子组件 -->
        <Child1></Child1>
        <Child2></Child2>
    </div>

</template>


<script>
    //导入components目录下的子文件 Child1为指定的组件名，可以任意命名，不一定按照文件名
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'

export default {
    // 将子组件添加到App.vue中
    components:{
        Child1,
        Child2,

    }
}
</script>

<style>

</style>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <App></App>
        <script src="./index.js"></script>
    </div>

    
</body>
</html>

启动服务

查看结果：

2.3  多个单文件组件通过路由的使用

1. 创建routers 文件夹  ，在该文件夹下新建router.js文件   在该文件下导入 两个组件

 2  导入单文件组件  指定vue使用路由  指定路由规则

// 1. 导入两个功能模块
import  Vue  from 'vue'
import   Router  from 'vue-router'
import { component } from 'vue/types/umd'

// 2. 导入单文件组件

import Child1 from   '../components/Child1'
import Child2 from   '../components/Child2'

//  3  指定Vue使用 路由

Vue.use(Router)

// 4 指定路由规则

export default new Router({
    routes:[
        {
            path:'/child1',
            component:Child1
        },
        {
            path:'/child2',
            component:Child2
        }
    ]
})

 3 进到main.js下  将路由注册到vue对象中

4 在App.vue中加载渲染

 

 2.4  Element的使用

单文件组件就像是一个个封装好的页面样板，我们可一把这些样板组合在一起形成一个完整的页面。就像QQ空间装扮一样，将个个样板放入QQ空间页面中组成自己风格的页面。而Element-ui就将我们需要的样式封装成单文件组件，我们可以直接集成到我们的项目中。

 1 在main.js中将emelent-ui引入到项目中

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
// 引入ElementUI
import ElementUI from 'element-ui'
// 引入css
import 'element-ui/lib/theme-chalk/index.css'
// 使用ElementUI
Vue.use(ElementUI)

new Vue({
    el:'#app',
    router,
    render:function(creater){
        return creater(App)
    }
})

2 

在子组件中使用element-ui的代码,

<template>
<div>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-slider v-model="value1"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">自定义初始值</span>
    <el-slider v-model="value2"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">隐藏 Tooltip</span>
    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">格式化 Tooltip</span>
    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">禁用</span>
    <el-slider v-model="value5" disabled></el-slider>
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 50,
        value3: 36,
        value4: 48,
        value5: 42
      }
    },
    methods: {
      formatTooltip(val) {
        return val / 100;
      }
    }
  }
</script>

Emelent的其他效果样式可以参考官方网站：

http://element-cn.eleme.io/#/zh-CN/component/progress

3 Vue-cli的使用

我们的项目文件都是手动创建出来，在实际开发中我们可以借助vue-cli创建出我们的所有项目文件

  1. 全局安装vue-cli

    1. npm install --global vue-cli

  2. 项目创建   根据默认配置安装即可

    1. vue init webpack 项目名

  3. 运行调试项目

    1. // 进入项目目录下，执行下面指令
npm run dev

  4. 项目打包

    1. npm run build

项目目录结构

  • 文件夹1(src)，主开发目录，要开发的单文件组件全部在这个目录下
  • 文件夹2(static)，静态资源目录，所有的css，js文件放在这个文件夹
  • 文件夹3(components)，组件目录，vue格式的单文件组件都存在这个目录中
  • 文件夹4(router)，路由目录，在此文件夹中配置组件路由

还有node_modules目录是node的包目录，config是配置目录，build是项目打包时依赖的目录。

页面结构说明

 整个项目是一个主文件index.html,   index.html中会引入src文件夹中的main.js,  main.js中会导入顶级单文件组件App.vue,  App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。

  1. 项目打包

    1. npm run build

打包好之后会生成一个 dist文件

打包好之后就可以上传到服务器上。

熙仪繁华
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE.js实战开发指南之 -- Library库
Forest毅青的专栏
06-19 2089
Library库全局导入library库在main.js中可以全局导入所有的library库，这样页面文件就不需要额外导入library并能直接使用，这样能效率。// main.js/** * 全局librarys */ import utillib from 'libs/utillib' Vue.$utillib = Vue.prototype.$utillib = utillibimport
vue-cli-plugin-component-创建组件的Vue CLI 3插件-Vue.js开发
05-27
vue-cli项目的vue-cli-plugin-component组件插件│README.md│LICENSE（可选）└───src│├──index.js│└───components│vue-cli-plugin-component组件vue-cli项目的插件│README.md│LICENSE（可选）└─...
vue-cli 组件的使用
weixin_30892889的博客
01-05 114
开始项目之前，先了解如何创建项目:http://www.cnblogs.com/pearl07/p/6247389.html 1，项目目录结构（路由是后来建的，将在下一篇使用路由，此处可忽略）。 2，首先完善main.js。 3，在components下 ，新建一个first.vue组件，并实现基本功能（模板、script和样式） ----此处应该先了解vue...
vue：单文件的使用
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-14 523
vue2、vue3单文件的使用
【Vue】VueCLI 的使用和单文件组件（1）
看花容易绣花难
11-10 459
VueCLI 的使用和单文件组件（1）
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
使用vue-i18n-loader的单个文件组件中的区域设置消息 区域设置消息丢失和未使用的报告（实验性） 环境变量 :rocket: 入门 如果yon没有使用Vue CLI创建的项目： vue create my-vue-app 将插件安装到您的项目中： ...
vue-cli脚手架-bulid下的配置文件
08-27
* src目录：用于存放项目的源代码，例如JavaScript文件、Vue组件等。 五、环境变量和依赖项 Vue-cli项目的环境变量和依赖项是项目开发和构建的关键部分。环境变量用于配置项目的开发、测试和生产环境。依赖项则...
vue-cli脚手架的.babelrc文件用法说明
10-14
在 Vue CLI 3.x 项目中，如果你使用 Element UI 并想要减少打包后的体积，可以实现按需加载组件。以下是实现步骤： 1. 安装插件 `babel-plugin-component`：`npm i babel-plugin-component -D` 2. 配置 `babel....
vue-cli开发的商城源代码
01-18
此外，项目可能还包含了各种配置文件，如`vue.config.js`，用于自定义Vue CLI服务的配置，如端口、代理设置等。在开发过程中，开发者可以通过`npm run serve`命令启动本地开发服务器，`npm run build`命令将项目打包...
vuecli3打包插件（打包组件）为单个js文件
qq_67305990的博客
06-28 557
vuecli3打包插件（打包组件）为单个js文件。别再用vue init了_henjuewang的博客-CSDN博客
为什么要用vue-cli3？
盏茶作酒的博客
07-18 733
vue-cli3相对vue-cli有很多重要的更新。 首先说一些vue-cli这些工具的初衷吧: 这些工具就是为了让开发者能够开箱即用快速地进行应用开发而开发的，它们秉承的是“约定大于配置”思想，简单说就是"能不配置的就不配置，你就按照我的方式来，也不要去争论这个好不好，快速进行业务开发才是正经事". 它们不建议你去配置，但也不会拦着你去配置。 另外Webpack对初学者并不是十分友好，‘又长又臭’的配置，普通开发者很难写入定义良好，性能优化的配置。不然就不会各种cli工具冒出来了，比如parcel，c
【Vue】Vue-cli(脚手架)实现单文件Vue组件的调用（图文和代码）
【敦厚的曹操】的专栏
03-28 788
一、实现效果 二、实现步骤 1、单文件Vue组件School.Vue（在components） <template> <!-- 组件一 --> <div class="demo"> <h2>---------【School.vue】---------</h2> <h2>学校名称：{{ schoolName }}</h2> <h2>学校地址：{{ address
vue 组件化开发 调试工具
procul的博客
07-19 396
全局组件注册 Vue.component('组件名称'，{ data:funciton(){ 对象数据} //data必须是一个函数 template: 模板语法}) //组件中的模板内容必须是单个元素 模板语法 可以是模板字符串 局部组件注册 var 组件名称={ 如全局注册相同 } //局部组件只能在注册在他的父组件中使用 components:{'组件名称’:组件内容} //全局组件中不能嵌套局部组件 组件的使用 &lt...
自定义组件引入使用单标签还是双标签好
最新发布
qq_43720551的博客
08-15 569
在许多前端框架和库中，自定义组件可以使用单标签或双标签进行引入和使用。
Vue单文件组件中的小技巧
技术无止境
05-09 2814
如何设置路径的别名 可以在build目录下的webpack-base-config.js 在resolve进行配置如下 { resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), ...
vue-cli 构建库
专心填坑的姑娘
12-21 816
记录一下，方便自己看。 webpack.json { "name": "vue-mobile-notification", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build&
【webpack】解决使用umd模式打包后，在vue-cli项目引入为undefined问题
只会写bug
03-30 1593
【webpack】解决使用umd模式打包后，在vue-cli项目引入为undefined问题，umd打包
Vue全家桶系列之Vue-cli(二)
08-31 3067
文章目录1.前言2.项目目录结构 1.前言 上篇文章说了vue-cli安装和启动，并且说了下项目源码的目录结构，这篇文章我们来主要说下整个项目的目录结构！ 2.项目目录结构 先来看下整个目录结构，看下图! build文件夹其实是一些webpack配置相关的，里面的js文章下篇文章我会详细讲解！ config其实是生产环境和开发环境的一些配置参数！ node_modules是安装的第三方依赖！ src是我们做项目的时候写的源码，里面有个vue结尾的是单文件组件，这个目录下的文件会被webpack进行进
Vue入门：Webpack+vue-cli构建，从简单雏形到组件开发
Vue.js是一个流行的JavaScript前端框架，它基于MVVM（模型-视图-视图模型）模式，旨在简化单页面应用（SPA）的开发过程。初识Vue，我们可以看到它与Angular（1.x版本更新频繁）和React等框架有所区别，因其简洁易用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值