VueCli的安装

最新推荐文章于 2024-06-28 17:04:58 发布

NoProblemLi

最新推荐文章于 2024-06-28 17:04:58 发布

阅读量162

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ljx1129071273/article/details/110881410

版权

五、VueCli的使用

5.1 全局安装vuecli

npm install -g @vue/cli
//查看版本
vue --version
这里安装的是最新的版本,所以要想要使用vc2.x的版本要自己下载2的版本

如果脚手架安装失败,那么就要在C:\Users\Administrator\AppData\Roaming\ 路径下吧npm-cache文件删除

拉取2.x的版本

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project   //创建vc2的版本
vue create my-project //创建vc3的版本

在这里插入图片描述

了解创建的目录结构

https://blog.csdn.net/lzc2644481789/article/details/107820665

5.2 创建的目录结构

在这里插入图片描述

流程是：index.tml->main.js->app.vue->index.js->helloworld.vue

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>runtimeonly</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//引入App.vue
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>'
  //main.js这个是主要的入口   index.tml->main.js->app.vue->index.js->helloworld.vue
  // 在components里面注册了这个组件  然后在template里面使用了这个组件  也就是在这个父组件里面使用了这个子组件
  //  然后这个<App/>就会替换#app标识的组件
  //可以向每一个单独的vue文件看成是一个单独的组件  里面使用的是组件的模板
  //App.vue是最根本的组件  主要复杂来引用其他的组件
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

启动一个文件

npm run dev

5.3 vuecli3

vue crate myproject
创建项目
npm run serve 启动

如果要进行配置修改需要添加 vue.config.js文件

model.exports={}

5.4 箭头函数

基本使用

<script>
  // 箭头函数: 也是一种定义函数的方式
  // 1.定义函数的方式: function
  const aaa = function () {

  }
  // 2.对象字面量中定义函数
  const obj = {
    bbb() {

    }
  }
  // 3.ES6中的箭头函数   没有参数没有返回值的
  // const ccc = (参数列表) => {
  //
  // }
  const ccc = () => {

  }
</script>

有参数有返回值的

<script>
  // 1.参数问题:
  // 1.1.放入两个参数
  const sum = (num1, num2) => {
    return num1 + num2
  }
  // 1.2.放入一个参数
  const power = num => {
    return num * num
  }
  // 2.函数中
  // 2.1.函数代码块中有多行代码时
  const test = () => {
    // 1.打印Hello World
    console.log('Hello World');
    // 2.打印Hello Vuejs
    console.log('Hello Vuejs');
  }
  // 2.2.函数代码块中只有一行代码
  // const mul = (num1, num2) => {
  //   return num1 + num2
  // }
  const mul = (num1, num2) => num1 * num2
  console.log(mul(20, 30));

  // const demo = () => {
  //   console.log('Hello Demo');
  // }
  const demo = () => console.log('Hello Demo')
  console.log(demo());
</script>

箭头函数中this的使用

<script>
  // 什么时候使用箭头
  // setTimeout(function () {
  //   console.log(this);
  // }, 1000)
  //
  // setTimeout(() => {
  //   console.log(this);
  // }, 1000)
  // 问题: 箭头函数中的this是如何查找的了?
  // 答案: 向外层作用域中, 一层层查找this, 直到有this的定义.
  // const obj = {
  //   aaa() {
  //     setTimeout(function () {
  //       console.log(this); // window
  //     })
  //
  //     setTimeout(() => {
  //       console.log(this); // obj对象
  //     })
  //   }
  // }
  //
  // obj.aaa()
  const obj = {
    aaa() {
      setTimeout(function () {
        setTimeout(function () {
          console.log(this); // window
        })

        setTimeout(() => {
          console.log(this); // window
        })
      })
      setTimeout(() => {
        setTimeout(function () {
          console.log(this); // window
        })
        setTimeout(() => {
          console.log(this); // obj
        })
      })
    }
  }
  obj.aaa()
</script>