Vue入门到关门之Vue项目工程化

一、创建Vue项目

1、安装node环境

  • 官网下载,无脑下一步,注意别放c盘就行
    • Node.js — Run JavaScript Everywhere (nodejs.org)
  • 需要两个命令
    • npm---->pip
    • node—>python
  • 装完检查一下,hello world检测,退出crtl+c

在这里插入图片描述

2、搭建vue项目环境

  • 装cnpm 这个包,下载东西会快很多,装模块 cnpm替代npm,其他命令还是使用npm
npm install -g cnpm --registry=https://registry.npmmirror.com

在这里插入图片描述

  • 如果卡顿,或者一直失败,可以尝试以下两个解决方案
### 解决方案1:
// 1. 清空缓存
npm cache clean --force
// 2. 关闭SSL验证
npm config set strict-ssl false
// 3. 安装
到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm   )

### 解决方案2:
// 1. 清空缓存
npm cache clean --force
// 2. 切换新源
npm config set registry https://registry.npmmirror.com
// 3. 查看源是否设置成功
npm config get registry
// 4. 安装
到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm   )
  • 检测是否安装成功

在这里插入图片描述

3、安装vue脚手架

cnpm install -g @vue/cli

在这里插入图片描述

4、创建项目

(1) 装完脚手架,就会有个vue命令,通过vue命令创建vue项目

vue create myfirstvue # 按下面步骤
  • 选y

在这里插入图片描述

  • 选第三个,enter进入

在这里插入图片描述

  • 选下面三个,空格是选择或者取消,方向键控制上下

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 创建成功

在这里插入图片描述

(2)命令行输入vue ui也可以创建项目

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

5、使用webstorm打开项目

在这里插入图片描述

6、运行项目

(1)在命令行中输入命令运行

  • 注意命令行的路径得是项目根路径,使用:
npm run serve
  • 默认terminal使用的是powershell,我们可以改成cmd来使用

在这里插入图片描述

在这里插入图片描述

  • 如果有下面这个启动错误

在这里插入图片描述

  • 解决方案

这个错是因为文件夹权限不够,不要将创建的Vue项目放到任意盘的program files文件夹里,不然永远是这个错误,因为那个文件夹不能设置为完全控制,所有肯定会报权限不够的错误。

解决方案就是将项目放入一个自定义文件夹即可

(2)配置webstorm,点绿色箭头执行

  • 新建一个npm命令用来执行执行 serve脚本

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 启动成功的界面

在这里插入图片描述

在这里插入图片描述

二、vue项目目录结构

myfirstvue            # 项目名
	-node_modules     # 等同于python的venv--》虚拟环境-->里面有很多js,项目的依赖-》可以删除---》项目就不能运行了--》在你本地--》cnpm install--》根据package.json项目的依赖,再重新安装--》又可以运行了
    -public           # 文件夹,一般不动
        -favicon.ico  # 小图标
        -index.html   # spa--》单页面应用--》整个vue项目,就只有这一个html-如果禁用了js--》整个vue都用不了
     -src             # 文件夹---》核心代码
        -assets       #文件夹,都放静态文件--》图片,css,js。。。
        	-logo.png # 静态图片
        -components   # 小组件,给页面组件使用
            HelloWorld.vue # HelloWorld 组件
        -views        # 页面组件,页面跳转,实现像 html跳转一样的效果
            AboutView.vue # 关于页面
            HomeView.vue  # 首页
        -store            # vuex--》状态管理器
            index.js
        -router           # vue-router---》路由配置文件
            index.js
        -App.vue          # 根组件
		-main.js          # 整个项目入口
        
   -.gitignore      # git忽略文件,学了git就会了
   -babel.config.js # 装了bable配置文件--》把高版本es语法转成es5
   -jsconfig.json   # 不用管
   -package.json    # 项目依赖文件--》项目依赖--》npm install--》根据他装
   -package-lock.json # 锁定文件,之前项目中使用模块版本
   -README.md       # 项目介绍
   -vue.config.js   # vue整体配置文件   

三、vue项目运行机制

  • main.js是整个项目入口文件
// main.js---> 指定了index.html---> id为app的div---> 根App.vue 这个组件做了关联

//es6 模块导入规范,等同于python导包
//commonJs的导入规范:var Vue=require('vue')
import Vue from 'vue'
import App from './App.vue'  //根组件
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)  // 代指 el
}).$mount('#app')


/*
new Vue({
	el:'#app' //原来是用el:'#app',现在是new出Vue对象,挂载到#app上---》.$mount('#app')
  render: h => h(App) //原来是在页面上div中写样式,现在组件化开发 把根组件(import App from './App.vue'),通过render渲染上,渲染组件的方式
}).$mount('#app')
*/
  • vue文件大致模版(template、script、style)
<template>
    <!-- 模板区域 -->
</template>
<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
  	//export default-->es6的默认导出(导出一个对象),模拟commonJS的导出方式制定的
    export default {
        
    }
</script>
<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

  • 组件写法
# template 写之前我们方在template标签的模版字符串
<template>
  <div id="app">
    <h1>我是根组件</h1>
    <button @click="haneldShow">点我弹alert</button>
  </div>
</template>

# script标签--》原来js代码都写在这里、
<script>
export default {
  name: 'HelloWorld', // 组件名字
  data() {
    return {}
  },
  methods: {
    haneldShow() {
      alert('111')
    }
  }
}
</script>


#style
<style>

button{
  background-color: aqua;
}
</style>
  • 定义组件
//1 新建xx.vue
components-->HelloWorld.vue
//2 引入使用
<script>
	// es6的引入import from 
  import HelloWorld from '@/components/HelloWorld.vue'
  import Vue from 'vue'
  Vue.component('HelloWorld',HelloWorld)  // 全局组件
  export default {
     components: {  // 局部组件
   		 HelloWorld:HelloWorld
  		},    
}
</script>

四、es6语法总结

1、let、const、var

在JavaScript中,letconstvar是用于声明变量的关键字,它们在作用域、可变性和提升等方面有一些重要的区别。 在ES6之前,我们都是用var来声明变量,而且JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围。

ES6 新增了let命令,用来声明局部变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束。

(1)var

  • var是ES5及之前版本中用于声明变量的关键字。
  • 使用var声明的变量存在函数作用域或全局作用域,而不存在块级作用域。
  • var声明的变量可以被重新赋值,并且可以在同一作用域内多次声明同一个变量。
  • var声明的变量会被提升(hoisting),即变量的声明会被提升到作用域的顶部,但赋值不会被提升。
  • 例如:
    var x = 10;
    if (true) {
      var y = 20;
      console.log(x); // 可以访问 x
      console.log(y); // 可以访问 y
    }
    console.log(x); // 可以访问 x
    console.log(y); // 可以访问 y,因为 var 变量会被提升
    

(2)let

  • let是ES6中引入的关键字,用于声明块级作用域的变量。
  • 使用let声明的变量可以被重新赋值,但不能在同一作用域内重新声明。
  • let声明的变量不会被提升,只有在声明后才能访问。
  • 例如:
    let x = 10;
    if (true) {
      let y = 20;
      console.log(x); // 可以访问 x
      console.log(y); // 可以访问 y
    }
    console.log(x); // 可以访问 x
    console.log(y); // 会报错,y 在块级作用域外不可访问
    

(3)const

  • const也是ES6中引入的关键字,用于声明常量,常量的值一旦赋值就不能再改变。
  • 常量必须在声明时进行初始化,且常量的值不可被重新赋值,但如果常量是对象或数组,对象或数组的属性或元素可以被修改。
  • const声明的变量也具有块级作用域。
  • 例如:
    const PI = 3.14;
    // PI = 3.14159; // 这里会报错,常量不可重新赋值
    
    const person = {
      name: 'Alice',
      age: 30
    };
    person.age = 31; // 这是允许的,因为对象的属性可以修改
    

(4)总结

  • 在现代JavaScript中,推荐优先使用const,如果变量的值需要变化,则使用let,避免使用var
  • letconst提供了更好的变量声明方式,有助于代码的可读性和可维护性,同时避免了var可能导致的一些问题。
  • 使用let声明变量时,如果变量的值会发生变化,但不需要重新声明变量,可以使用let
  • 使用const声明常量时,如果变量的值不会改变,可以使用const,这有助于提高代码的可读性和可维护性。

(5)补充

“暂时性死区”(Temporal Dead Zone,简称 TDZ)是指在 ES6 中使用 let 或 const 声明变量时,变量存在但无法访问的区域。这种行为是为了在 JavaScript 中引入块级作用域而设计的。

在 JavaScript 中,使用 var 声明的变量在其声明语句之前就可以被访问,这种行为称为"变量提升"。而在使用 let 或 const 声明变量时,变量虽然存在于作用域中,但是在声明语句之前访问这些变量会导致引发 ReferenceError 异常。

暂时性死区的产生原因是,let 和 const 声明的变量在进入作用域时就已经被创建,并且被绑定到了该作用域中,但是在变量的声明语句之前,访问这些变量会进入暂时性死区,因为此时变量尚未初始化

2、 箭头函数

(1)简化代码,使代码更简洁

(2)箭头函数内部,没有自己的this,它会使用上一级的this,解决了函数内部的this指向问题

(3)this指向问题:

  • 在全局上下文中,this 指向全局对象,在浏览器环境中通常是 window 对象,在 Node.js 中是 global 对象
console.log(this) # window 对象
  • 函数调用

    • 如果函数作为普通函数调用,this 指向全局对象(在严格模式下为 undefined)

    • 如果函数作为对象的方法调用,this 指向调用该方法的对象。

  • 构造函数

    • 在构造函数中,this 指向的是新创建的实例对象。
  • 箭头函数

    • 箭头函数的 this 指向定义时所在的作用域的 this 值,而不是调用时的 this 值。换句话说,箭头函数的 this 是词法作用域,而不是动态作用域。在传统的函数中,this的值是在函数被调用时确定的,根据调用方式不同可能指向不同的对象。但是在箭头函数中,this的值是在定义函数时确定的,它会捕获所在上下文的this值,而不是在运行时改变。这种行为可以避免在回调函数中出现意外的this指向问题,使得代码更加简洁和可读。
  • DOM 事件处理函数:

    • 在 DOM 事件处理函数中,this 指向触发事件的 DOM 元素
  • ES6 类方法:

    • 在 ES6 类方法中,this 指向调用该方法的对象实例

3、模版字符串

模板字符串是 JavaScript 中的一种特殊字符串,用反引号 ` (也称为反引号、重音符号或反引号字符)括起来。模板字符串可以包含多行文本和嵌入表达式,使用${}语法插入表达式。这使得在字符串中嵌入变量、表达式或函数调用变得更加方便。举个例子:

const name = 'Alice';
const greeting = `Hello, ${name}!`;

console.log(greeting); // 输出: Hello, Alice!

在上面的例子中,${name}是一个嵌入的表达式,它会被变量name的值替换掉。模板字符串的这种特性使得动态生成字符串变得更加简单和直观。

4、解构赋值

解构赋值是一种在 JavaScript 中方便地从数组或对象中提取数据并赋值给变量的语法。它可以让你快速地将数组或对象中的值解构到单独的变量中。

  • 解构赋值允许从数组或对象中提取数据,并将其赋值给变量。
  • 解构赋值可以方便地交换变量的值,同时还支持默认值。

(1)对象解构赋值

在对象解构赋值中,花括号{}里面放置的是要提取的属性名,而变量名则是接收对应属性值的变量名。

let user = {name: 'lqz', age: 19, hobby: '烫头'}
// 平常写法
let name=user.name
let age=user.age
// 解构赋值写法
let {name,age,hobby,a=10} = user

console.log(name,age,hobby,a)

(2)数组解构赋值

在数组解构赋值中,方括号[]里面放置的是要提取的元素位置,而变量名则是接收对应位置元素的变量名。同时**,...rest的语法表示将剩余的元素赋值给rest变量,这在需要获取数组中剩余元素时非常有用。**

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(rest); // 输出: [3, 4, 5]

(3)解构函数返回值

function getuserInfo() {
    return {name: 'xiao', age: 19, hobby: ['烫头', '喝酒']}
}

let {name='1', hobby} = getuserInfo()
console.log(name, hobby)  // 如果内部修改,优先返回值中的值

5、默认参数

ES6 允许在函数参数中设置默认值,当调用函数时未提供参数时,将使用默认值

# 案例
function demo01(name,age=19) {
    console.log(name,age)
}
demo01('xiao')

6、展开运算

展开运算符 ... 可以将可迭代对象(如数组、字符串、对象)展开为多个参数或元素。也可以用于函数参数。

# 案例1:对象
let a={age:19,hobby:'打球'}
let user={name:'xiao',age:20,...a}
console.log(user)
'''
Object
    age: 19    # 以后面值为主
    hobby: "打球"
    name: "xiao"
'''

# 案例2:数组
let l=[1,2,3]
let l1=[44,55,66,...l]
console.log(l1)
# [44, 55, 66, 1, 2, 3]

# 案例3
function demo01(a,...b){
    console.log(a)
    console.log(b)
}
demo01(1,2,34,4)
'''
1
[2, 34, 4]
'''
let l=[44,5,66,7]
demo01(...l)
'''
44
[5, 66, 7]
'''

7、模块化

在以后,做项目开发的时候,肯定要导入某些模块使用:

  • 之前的前端是使用<script src=""></script>
  • 以后在项目中:import App from './App.vue' 语法引入

(1)默认导出和导入

默认导出 (Default Export)

默认导出允许一个模块只导出一个默认值。在一个模块中,你可以使用 export default 来导出默认值,然后在另一个模块中使用 import 语句来引入这个默认值。

示例:

// xiao/utils.js
var name = 'xiao'

function add(a, b) {
    console.log(name)
    return a + b
}

export default name  // 只导出变量
export default add   // 只导出函数
export default {name,add}  // 导出对象

export default {
    name:"彭于晏",
    add: (a,b)=>{
        return a+b
    }
}
导入默认导出

在导入默认导出时,你可以选择给导入的变量起一个名字,这个名字不必和导出时的名称相同。

<script type="module">
    // 相对导入,相对于当前文件
    import xiao from './xiao/utils'  
    
	// 绝对导入--》开始导入的路径  src路径,但是需要写个 @
    import xiao from '@/xiao/utils'
    
	console.log(utils.name)
    let res=utils.add(3,4)
    console.log(res)
</script>
注意事项
  • 一个模块只能有一个默认导出。
  • 在导入默认导出时,你可以选择使用任何合法的变量名。

默认导出适用于导出一个单一的值、对象、函数等,使得导入时更加简洁。

(2)命名导出和导入

在 JavaScript 中,除了默认导出之外,还有一种常用的导出方式是命名导出(Named Export)。命名导出允许一个模块导出多个变量、函数或对象,这些导出的内容可以在导入时通过名称引用。

命名导出 (Named Export)

使用命名导出时,你可以在一个模块中通过 export 关键字导出多个变量、函数或对象,然后在另一个模块中通过名称引入这些导出。

示例:

// xiao/utils.js
// 可以导出多个
export const age = 99
export const add = (a, b) => a + b
export const showName = name => {
    console.log(name)
}

export const obj={
    name:'xiao',
    show(){
        alert('show')
    }
}
导入命名导出

在导入命名导出时,需要使用花括号 {} 来指定要导入的内容,同时这些名称必须与导出时使用的名称相匹配。

// 第一种方式:花括号导入
import {age, add, showName} from '@/xiao/common'
import {showName, obj} from '@/xiao/common'
// 以后可以使用showName里面函数
// 以后可以使用obj的对象,又可以点obj.xx

// 第二种方式:*全部导入然后取别名
<script type="module">
    import * as xx from './xiao/utils.js'
    console.log(xx.add(8,9))
    console.log(xx.age)
</script>
注意事项
  • 一个模块可以有多个命名导出。
  • 在导入命名导出时,必须使用与导出时相同的名称。

命名导出适用于导出多个变量、函数或对象,使得模块的功能更加灵活和可扩展。

(3)如果在文件夹下有个index.js,只要导到文件夹一层即可

  • index.js就相当于python中的__init__,导入的时候可以不用带index.js
// 导出的是index.js
export default {
    name:'xiao',
    showAge:function (){
        console.log('age',this.name)
    },
    showName:()=>{
        console.log(this.name)
    },
    showHobby(){
        console.log('hobby',this.name)
    }
}

// 导入可以不用带index
<script type="module">
    // 命名导出的导入
    import xiao from '@/xiao/index'
    或者可以直接写成
    import xiao from '@/xiao'
    console.log('----',lqz.name)
    lqz.showAge()
    lqz.showHobby()
</script>

(4)vue项目中,组件的使用

  • 创建组件Child
<template>
  <div>
    <div class="top">
      <button>后退</button>
      <span @click="handleShow">{{ title }}</span>
      <button>前进</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Child',
  data() {
    return {
      title: '首页'
    }
  },
  methods: {
    handleShow() {
      alert('1111')
    }
  }
}
</script>


<style scoped>
.top {
  display: flex;
  justify-content: space-between;
}
</style>
  • 在其他组件中使用
<template>
  <div id="app">
    <h1>我是根组件</h1>
    <button>点我弹alert</button>
    <hr>
    <Child></Child>
  </div>
</template>
<script>
// @ 代指---》src文件夹
import Child from "@/components/Child.vue";
export default {
  name: 'HelloWorld',  // 组件名字
  components:{
    Child    // 注册局部组件
  }
}
</script>

<style>
button{
  background-color: aqua;
}
</style>

五、vue-router简单使用

单页面应用的字面意思就是只需要一个html页面就能实现页面跳转的效果,其本质就是组件的跳转。

那组件如何跳转?这就需要借助于第三方:vue-router 了

1、安装vue-router

(1)通过 npm 安装

  • 这是最常用的安装方式。安装完成后,你可以在代码中引入并使用 Vue Router。
npm install vue-router

(2)通过 CDN 引入

  • 你也可以通过 CDN 的方式引入 Vue Router,在 HTML 文件中添加以下代码:
  • 这种方式适合快速体验或在简单的项目中使用。
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

(3)通过 Vue CLI 安装

  • 如果你使用 Vue CLI 创建项目,在创建项目时可以选择安装 Vue Router。Vue CLI 会自动配置好 Vue Router 的基本设置。
vue create my-project
# 在创建项目时选择安装 Vue Router

但是如果你在创建vue项目的时候没有勾选router项,在这里可以按照第一种或者第二种方案进行安装。一般情况下,推荐使用 npm 安装的方式,因为这种方式可以更好地与构建工具(如 Webpack)集成,并且可以使用 ES6 语法。

2、App.vue写个标签

只需要在App.vue 写个标签,之后就不要再写任何其他东西了

<template>
<div id="app">
    <router-view>

    </router-view>
    </div>
</template>

3、在views里面创建页面组件

根据你的需求来创建不同的页面组件,为了下面的登录跳转案例,我在这里会创建IndexView LoginView两个页面组件,当登录成功时跳转到首页获取电影列表。

4、注册组件

接下来需要我们在在 router/index.js里面注册刚刚创建的页面组件

# 1 导入
    import LoginView from "@/views/LoginView";
    import IndexView from "@/views/IndexView";

    const routes = [
    # 2 注册路由
    {
        path: '/',
        name: 'home',
        component: IndexView
    },
    {
        path: '/login',
        name: 
上一篇:细讲Node.js模块化,以及 CommonJS 标准语法导出和导入,详细简单易懂!


下一篇:Redis 实战2-系列文章目录