搭建一个属于自己的vue-cli脚手架

汪汪牛仔糖
467 阅读5分钟

vue-cli是什么

vue-cli是vue官方提供的一个全局模块包(通过命令工具行来使用), 用来快速创建一个脚手架项目。

  • 脚手架工程就是一套固定的文件夹+文件+配置的工程, 我们在此基础上开发业务。
  • 在开发过程中，脚手架工具是有用的，开发完成（项目上线生产环境），它就没有用了。

好处和能力

  • 统一的项目结构(文件夹+文件+配置代码)

  • 开发过程中的webpack各系列支持

    • babel支持
    • eslint约束语法风格（代码风格）
    • 样式预处理器less
    • vue单文件支持

  • 提供一个开发时服务器，预览代码（预览项目）

    • 自动刷新，方便预览
    • 热更新 (只刷新修改的部分)

  • 基于nodejs的命令行工具

安装vue-cli

安装之前先将镜像源修改为淘宝地址,这样下载速度更快。

npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
npm config get registry  #查看镜像地址

全局安装命令

npm install -g @vue/cli  #安装命令
vue --version     #检测是否安装成功

如果可以看到版本号，就表示安装成功了。

vue-cli 创建项目

1.创建项目

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

2.选择模板

image.png 3. 回车安装依赖
等待脚手架工作自动生成项目文件夹+文件， 并下载必须的第三方包。文件夹比较大,可能下载的时间比较长。
4. 启动项目

cd vuecil-demo  先进入创建的文件夹

npm run serve

image.png
只要能看到绿色就是成功了

注意:

  1. 小黒窗中的vue create命令是由@vue/cli提供的。
  2. vue create 用来快速创建项目：会自动创建文件夹。

项目说明和运行介绍

生成的vuecil-demo文件夹里的,文件作用。

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    └── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹=》写代码
      ├── assets     # 静态资源
          └── logo.png # vue的logo图片
      ├── components # 组件目录
          └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── package.json # 描述项目及项目
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置 
    ├── README.md    # 项目说明
	  └── package-lock.json # 项目包版本锁定和下载地址

vue.config.js

使用vue.config.js覆盖webpack的配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: 'localhost',
    open: true,
    port: 3000
  },
  lintOnSave: false//关闭eslint,eslint代码风格校验
})
  1. vuecli的项目中不能直接看到webpack的配置
  2. 要在根目录里手动创建vue.config.js来覆盖webpack的配置

vue插值表达式

 <template>
  <div>
    <p>{{name}}</p>
    <p>{{info.age}},{{info.age+2}}</p>
    <p>{{age>20?'大白':'黑白'}}</p>
  </div>
</template>

<script>
export default{
  data(){
    return{
      name:'小白',
      info:{
        age:20,
      },
    }
  }
}
</script>
  1. 在vue中{{ }}语法，叫做：插值表达式，可以用来把数据显示在视图上,把{{ }} 理解为一个占位符（一个坑，{{ name }} 会在页面显示name的值,
  2. 里面可以写的data数据字段名称; 对data数据字段进行表达式运算; 拼接; 算数三元运算
  3. 不可以写: js语句：声明变量，分支，循环; 访问在vue实例中的data之外定义的自定义的变量

vue中的一些常用指令

1.指令v-bind

v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）

<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
// 简写, 省略v-bind使用:
<元素 :属性名1="值1" :属性名2="值2"></元素>

2.指令v-for

列表渲染, 所在标签结构, 按照数据数量, 循环生成

<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>
  • 索引可以省略
  • 目标结构可以是：数组 / 对象 / 数字

3.指令v-text和v-html

   v-text="vue数据变量" 
   v-html="vue数据变量"
  • v-text把值当成普通字符串显示, v-text ===> innerText
  • v-html把值当做html解析,v-html ===> innerHTML

4.指令v-show和v-if

 <标签 v-show="vue变量" /> 
 <标签 v-if="vue变量" />

如果vue变量的值为true是显示,为false是隐藏

  • v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show。

    • 注意无论变量是否为true还是false,它一定会创建元素的。

  • v-if 会动态创建和删除元素。

    • 在频繁的切换可见与不可见时，它的效率会低一点
    • 如果变量的值为false,它将不会创建元素

5.指令v-if,v-else-if,else

与js中的if选择结构是一致的。

<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>

v-on和methods

作用是为标签绑定事件

 <标签 v-on:事件名="要执行的*少量代码*" > 
 <标签 v-on:事件名="methods中的函数" >
 <标签 v-on:事件名="methods中的函数(实参)">

注意:v-on可以简写成 @。 即 @事件名="methods中的函数"

vue配置项-methods

它是一个对象，在这个对象中定义函数

<template>
  <div>
    <button @click='fn2'>this指向</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age:18
    }
  },
  //this会指向当前的组件
  methods:{
   fn(){
      console.log('调用的我')
    },
    fn2(){
      console.log(this,this.age);   // this会指向vue组件部分,这段代码的意思是this组件树下的age属性
      第一个this控制台会打印vuecomponent组件树,第二个会打印18
      //调用其他的methods
     this.fn() //控制台会打印:调用的我
    }
  }
}
</script>

this的指向是

  1. 与v-on配合使用
  2. 在methods内部访问数据。this.xxx
  3. 在methods内部调用其他的methods

v-on事件对象

  • 语法:
    • 无传参, 通过形参直接接收
    • 传参, 通过$event指代事件对象传给事件处理函数
<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    传参, 通过$event指代事件对象传给事件处理函数
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a> 
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

指令v-on修饰符

1.事件修饰符

<标签 @事件名.修饰符="methods里函数" />
  • .stop - 阻止事件冒泡
  • .prevent - 阻止默认行为event
  • .once - 程序运行期间, 只触发一次事件处理函数

2.按键修饰符

   [@keyup.enter ](</keyup.enter >) -  监测回车按键
   [@keyup.esc ](</keyup.esc >)    -   监测返回按键

v-model双向绑定

v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令。

  • 语法: v-model="data数据变量"
  • 双向数据绑定
    • 数据变化 -> 视图自动同步
    • 视图变化 -> 数据自动同步
   <p>姓名：<input v-model="userName"/></p>  
   //表单输入的内容,script行为也可以接收的到,双向绑定视图改变了后,数据也会跟着改变
   
   <p>
       <input v-model="hobby" type="checkbox" value="eat" /> 吃饭
        <input v-model="hobby" type="checkbox" value="see"/> 看好看的
     <p>
    <button @click="fn">提交</button> 
    
    <script>
export default {
  data() {
    return {
      userName: '请输入', // 初始值,进入页面后表单里会显示请输入,三个字
      hobby: ['see'], // 多选值用数组来保存,选see进入页面后会默认选择第二个多选框,
    }
  },
  methods: {
    fn(){
      console.log(this.userName) //点击提交后,控制台会打印用户输入的内容
      console.log(this.hobby) //控制台会打印,用户选择的value值
    }
  }
}
</script>

v-model适用于表单开发，会自动获取用户输入或选择的数据。

v-model修饰符

  • 语法:
    v-model.修饰符="vue数据变量"

    • .number   以parseFloat转成数字类型
    • .trim          去除首尾空白字符
    • .lazy          在失去焦点时触发更改而非inupt时
avatar
文章
阅读
粉丝