• 欢迎光临~

【Vue】vue项目搭建、ES6的简单使用(大觅)

开发技术 开发技术 2022-09-23 次浏览

目录
  • 项目搭建与基本配置
    • 项目搭建
      • 安装淘宝NPM镜像 cnpm
      • 安装webpack
      • 新建项目
      • 运行项目
        • 运行时出现的一些问题和解决方案
    • 框架安装
      • 安装UI框架iView
      • 引入UI框架iView
        • 引入方式1:全部引入
        • 引入方式2:按需引入
          • 安装插件
          • 配置
  • ES6的使用
    • let and const
      • let命令
      • const命令
    • 变量的解构赋值
        • 数组的解构赋值
          • Example01
          • Example02:嵌套数组解构
          • Example03:不完全解构
          • Examp04:解构赋值指定默认值
          • Example05:
        • 对象的解构赋值
          • 1.同名属性赋值
          • 2.不同名属性赋值
          • 3.{匹配模式:变量}
          • 4.默认值
    • 箭头函数
      • 箭头函数的起因
      • 箭头函数的定义
      • 箭头函数与普通函数的区别
      • 箭头函数的不适用场景
    • Map数据结构
      • Map数据结构的特点
      • 创建Map
      • Map常用属性和方法
    • Moudle语法
      • 概述
      • export、import命令
      • export default命令
  • 路由配置
    • Vue Router 的使用
      • 1.安装路由
      • 2.建立路由器模块

项目搭建与基本配置

项目搭建

安装淘宝NPM镜像 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

cnpm install webpack -g

新建项目

vue init webpack <项目名称>

project name:输入新的项目名称

project descrip:项目描述内容

author:作者

vue build:打包的方式

install vue-router:是否安装路由

Use ESLint to lint your code:是否启用ESlint检测,选择不起用

Set up unit tests:是否需要单元检测

Setup e2e tests with Nightwatch:是否需要端对端检测

运行项目

npm run dev

运行时出现的一些问题和解决方案

问题:'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序

解决方案:npm install

搭建完项目后,要先安装项目依赖模块,使用npm install

框架安装

安装UI框架iView

cnpm install iview --save

引入UI框架iView

引入方式1:全部引入

./src/main.js

import iView from 'iview'//引入iView框架
import 'iview/dist/styles/iview.css'//引入iView框架样式

【Vue】vue项目搭建、ES6的简单使用(大觅)

引入方式2:按需引入

安装插件
npm install babel-plugin-import --save-dev

该插件可以从组件库中引入需要的模块,而不需要把整个库都引入,从而提高性能

配置

./.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",
  ["import",
    {
      "libraryName":"iview",
      "libraryDirectory":"src/components"
      }
    ]
  ]
}

ES6的使用

let and const

let命令

作用:声明变量

作用范围:仅在所在代码块内生效

1.let命令作用域只局限于当前代码块

2.使用let声明的变量作用域不会被提前

3.在一个作用域中不能声明相同的let变量

4.for循环体中let父子的作用域

示例:判断多个相同的无标识按钮,哪一个被单击

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
var btns = document.querySelectorAll('button');//这里可以用var,也可以用let
        //下面只能用let,不能用var。用var的话,始终打印的是第五个按钮
        for(let i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                console.log("这是第"+(i+1)+"个按钮");
            }
        }  

const命令

  • const声明一个只读常量,一旦声明,常量值不能被改变

  • 作用域与let相同,只在声明所在块级作用域内有效,要声明后才可用,同一域下不可重复声明

变量的解构赋值

解构(Destructuring):按照一定模式从数组和对象中提取值,再对变量赋值

数组的解构赋值

Example01

原始赋值方式:

let a=1;
let b=2;
let c=3;

ES6 “模式匹配”

let [a,b,c] =[1,2,3]

本质上,这种写法属于“模式匹配”

Example02:嵌套数组解构

Example03:不完全解构

Examp04:解构赋值指定默认值

Example05:

略过

对象的解构赋值

1.同名属性赋值
	let {bar,foo}={foo:"Just foo",bar:"Just bar"}
        console.log("bar is:"+b)
        console.log("foo is:"+f)
2.不同名属性赋值
        let {bar:b,foo:f}={foo:"Just foo",bar:"Just bar"} 
        console.log("bar is:"+b)
        console.log("foo is:"+f)

如果不明白就看看下面的写法

        let obj={foo:"Just foo",bar:"Just bar"}
        let {bar:b,foo:f}=obj
        console.log("bar is:"+b)
        console.log("foo is:"+f)
3.{匹配模式:变量}
let {foo:baz} = {foo:"abc",bar:"efg"}
console.log(baz)//"aaa"
console.log(foo)//error:foo is not defined
4.默认值
let {x:y=3}={}
console.log(y)//3

let {x:y=3}={x=5}
console.log(y)//5

箭头函数

箭头函数的起因

箭头函数的定义

箭头函数与普通函数的区别

箭头函数的不适用场景

Map数据结构

Map数据结构的特点

创建Map

Map常用属性和方法

Moudle语法

概述

export、import命令

export default命令

路由配置

Vue Router 的使用

1.安装路由

cnpm install vue-router --save

【Vue】vue项目搭建、ES6的简单使用(大觅)

安装完成后,会在src中有router/index.js


在main.js中导入

2.建立路由器模块

程序员灯塔
转载请注明原文链接:【Vue】vue项目搭建、ES6的简单使用(大觅)
喜欢 (0)