VUE CLI相关的知识

最新推荐文章于 2025-05-02 04:08:11 发布
最新推荐文章于 2025-05-02 04:08:11 发布
阅读量139 收藏 1
点赞数
分类专栏： VUE 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nickel369/article/details/109776297
版权
本文详细介绍了Vue CLI的安装与使用，包括CLI3的安装、模板创建和脚手架相关知识。此外，还讲解了路由管理，如URL修改、路由对象创建、动态路由和导航守卫。同时，探讨了render函数、箭头函数的用法，并对打包文件结构和路由懒加载进行了阐述。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、脚手架相关的知识

1.CUE CLI脚手架

1.概念

在这里插入图片描述

2.检查是否安装node

在这里插入图片描述

3.安装Vue脚手架cli3，命令为 npm install -g @vue/cli（console控制台进行输入）

在这里插入图片描述

4 脚手架安装成功，命令为vue --version

在这里插入图片描述

5 引用脚手架2模板的相关的知识

1.安装脚手架cli2的模板，命令为 npm install @vue/cli-init -g

在这里插入图片描述

2.脚手架2的初始化项目 vue init webpack 项目名

说明：在webpack终端里面执行以上的命令，创建cli
在这里插入图片描述
1.给项目取名字，保持默认就行了
在这里插入图片描述
2.项目描述
在这里插入图片描述
3.配置作者名字
在这里插入图片描述
4.选择打包方式
在这里插入图片描述
5.是否使用路由
在这里插入图片描述
6.是否规范js代码

在这里插入图片描述
7.是否使用单元测试
在这里插入图片描述
8.是否进行端到端测试
在这里插入图片描述
9.选择npm管理工具
在这里插入图片描述

二、脚手架相关的知识

1.执行npm run dev时候，报以下的错误

Local package.json exists, but node_modules missing, did you mean to install?
在这里插入图片描述

2.查看文件夹中是否有node_modules文件夹,此时文件夹中没有node_modules文件，此时我们需要安装相关的夹包文件

在这里插入图片描述

3.安装夹包文件，安装的命令为npm install

在这里插入图片描述

4 然后再执行npm run dev，不会报错了

在这里插入图片描述

三、模板创建的步骤

** 1. runtime compiler模板**
template–>ast–>render–>vdom–>UI

** 2. runtime only模板**
render–>vdom–>UI

四、render函数的相关使用

1. 直接对页面的进行渲染–普通用法

new Vue({
  el: '#app',
  render: function (createElement) {
   return  createElement('h2',{class: 'box'},['hello world']);
  }
})

createElement(参数一，参数2，参数3)，参数一表示标签的名字，可以使用h1标签，参数2表示所使用的样式，属性可以是box
等相关的属性，参数3表示前端展示的类容
在这里插入图片描述
在这里插入图片描述

2. 直接对页面的进行渲染-组件对象

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

const  cpn={
  template:'<div>{{message}}</div>',
  data(){
       return{
         message:"我是组件message"
       }
  }
}

new Vue({
  el: '#app',
  render:function (createElement) {
        return createElement(cpn);
  }
})

在这里插入图片描述
在这里插入图片描述

五、CLI3的基本使用

1.CLI的使用方法，命令为vue create 项目名

在这里插入图片描述

2.选择一个配置

在这里插入图片描述
在这里插入图片描述

3.选择一个那个版本的vue.js

在这里插入图片描述

4.把配置文件放到单独的配置文件里面还是pack.json里面

在这里插入图片描述

5. 是否保存刚才的配置

在这里插入图片描述

6. 保存文件名字

在这里插入图片描述

7. 安装CLI3失败

在这里插入图片描述
重新安装cli3 npm install -g @vue/cli（console控制台进行输入）

8. 对CLI3配置更改的工具，执行vue ui

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
vue.config.js修改本地配置文件

六、箭头函数的使用

1.定义函数的方式

1.通过function函数定义函数

<script>
     const a1=function(){
     }
</script>

2.对象字面量定义函数

<script>
     const obj={
        bbb:function(){
        
        }
        aaa(){
        }
     }
</script>

3.箭头函数的使用方法

<script>
     //无参数的使用
     const ccc=() =>{
     }
     
     //含有参数和返回值的时候
     const sum=(num1,num2) =>{
     return num1+num2;
     }
    
    //放入一个参数的时候
    const power=num=>{
      return num*num;
    }

  //只有一行代码时
  const mul=(num1,num2)=>num1*num2;
</script>

七、路由相关的知识

1.什么叫路由

在这里插入图片描述

2.更改url，实现url更改，但是页面没有进行刷新

1.方式一通过loacation中hash值进行修改

在这里插入图片描述
在这里插入图片描述

2.方式二通过history中pushState值进行修改

在这里插入图片描述
在这里插入图片描述
history.back()将会从栈里面取数据
通过history.go()方法取出对应的值
在这里插入图片描述
history.back()history.go(-1) history.forwardgo(1)

3.方式三通过history中replaceStatus值进行修改

在这里插入图片描述
但是这种方式没有历史记录

3.路由对象的创建过程

1.新建一个路由的文件夹和文件

在这里插入图片描述

2.在创建的index.js中引入路由相关的配置文件

import Vue from 'vue'
import Router from 'vue-router'

3.通过Vue.use(插件名)使用路由插件(index.js)

Vue.use(Router)

4.创建VueRouter对象对象(index.js)

const routes=[

]

const router=new VueRouter({
  //配置路由和组件之间的映射关系
  routes
})

5.将router对象传入到vue实例中(index.js)

export  default  router

6.在main.js中引入有关的实例

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

7.修改inde.js中路由相关的配置文件

//配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
import  Home from '../components/Home'
import  About from '../components/About'

//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes=[
  {
    path:'/home',
    component:Home,
  },
  {
    path:'/about',
    component:About,

  }
]

const router=new VueRouter({
  //配置路由和组件之间的映射关系
  routes,
  //路由的模式的设置
  mode:'history'
})

//3.将router对象传入到vue实例中
export  default  router

在这里插入图片描述

8.修改App.vue,使得显示的效果渲染出来

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

在这里插入图片描述
在这里插入图片描述

9.对开始加载类容一开始就显示为首页的图标，这里需要使用重定向指令

在这里插入图片描述

4.路由router-link里面相关属性的介绍

1.to属性表示跳转到对应组件

在这里插入图片描述
说明：/home表示跳转到定义的home组件当中，/about表示跳转到定义的about的组件当中

2.tag属性表示定义使用标签的属性，当无tag属性时，tag默认的属性为a标签，还可以渲染成button

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.replace属性，使得生成的网页无相关返回历史

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.设置点击按钮改变背景颜色和字体颜色

<style>
  .router-link-active{
    color: white;
    background-color: red;
  }
</style>

在这里插入图片描述

5.active-class属性表示把router-link-active修改为其他名字

在这里插入图片描述
在这里插入图片描述
说明需要批量改router-link-active的名字的时候，可以在路由配置里面设置linkActiveClass属性进行修改
在这里插入图片描述

6.通过代码实现页面的点击事件

<template>
  <div id="app">
   <!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->
   <!-- <router-link to="/home" tag="button" replace >首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>-->
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    homeClick:function () {
      this.$router.replace('/home');
    },
    aboutClick:function(){
      this.$router.replace('/about');
    }
  }
}
</script>

<style>
  .active{
    color: white;
    background-color: red;
  }
</style>

在这里插入图片描述

7.实现url地址的动态拼接

在这里插入图片描述

1.配置用户模板
<template>
    <div>
      <h2>我是用户界面</h2>
      <p>我要开始学习代码相关的知识了</p>
    </div>
</template>

<script>
    export default {
        name: "User",
    }
</script>

<style scoped>

</style>
2.配置导入用户模板
//配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
import  Home from '../components/Home'
import  About from '../components/About'
import  User from '../components/User'

//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes=[
  {
    path: '',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home,
  },
  {
    path:'/about',
    component:About,

  },
  {
    path:'/user/:userId',
    component:User,
  }
]

const router=new VueRouter({
  //配置路由和组件之间的映射关系
  routes,
  //表示路由的模式
  mode:'history',
  linkActiveClass:'active'
})

//3.将router对象传入到vue实例中
export  default  router

在这里插入图片描述

3.配置前端显示页面
<template>
  <div id="app">
   <!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->
    <router-link to="/home" tag="button" replace >首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
    <router-link v-bind:to="'/user/'+userId" tag="button" replace>用户</router-link>
   <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      userId:'LiSi'
    }
  }
  // methods:{
  //   homeClick:function () {
  //     this.$router.replace('/home');
  //   },
  //   aboutClick:function(){
  //     this.$router.replace('/about');
  //   }
  // }
}
</script>

<style>
  .active{
    color: white;
    background-color: red;
  }
</style>

在这里插入图片描述

4.后端获取相应userId值进行显示
<template>
    <div>
      <h2>我是用户界面</h2>
      <p>我要开始学习代码相关的知识了</p>
      <h3>{{userId}}</h3>
    </div>
</template>

<script>
    export default {
        name: "User",
        computed:{
          userId(){
            return this.$route.params.userId;
          }
        }
    }
</script>

<style scoped>

</style>

在这里插入图片描述

5.后端显示效果为

在这里插入图片描述

8、打包文件相关的介绍

1.打包文件夹显示

在这里插入图片描述

1.1 index.html

是打包之后的页面

1.2 css

表示打包之后所有的css样式

1.2 js

app表示所有你写的js的样式，都打包再app.xxxx.js里面
vendor表示第三方的js代码
mainfest表示对模块化做底层支撑的，import，export

2.路由懒加载模式的使用

2.1 结合Vue的异步组件和webpack的代码分析

const home=resolve=>{require.ensure(['../components/Home.vue'],()=>{resolve(require('../components/Home.vue'))})
}

2.2 AMD写法

const About=resolve=>require(['../components/About.vue'],resolve);

2.3 在ES6中，我们可以有更加简单的写法来组织Vue异步组件和webpack的代码分割

3.嵌套路由

3.1 什么嵌套路由

通过home/news，home/message等形式显示出来页面的形式
在这里插入图片描述

3.2 嵌套路由的实现

1.创建组件

HomeNews组件

<template>
  <div>
    <ul>
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "HomeNews"
    }
</script>

<style scoped>

</style>

HomeMessage组件

<template>
  <div>
   <ul>
     <li>消息1</li>
     <li>消息2</li>
     <li>消息3</li>
     <li>消息4</li>
   </ul>
  </div>
</template>

<script>
    export default {
        name: "HomeMessage"
    }
</script>

<style scoped>

</style>
2.创建组件
//配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
// import  Home from '../components/Home'
// import  About from '../components/About'
// import  User from '../components/User'

const  Home=()=>import('../components/Home')
const  About=()=>import('../components/About')
const  User=()=>import('../components/User')
const HomeNews=()=>import('../components/HomeNews')
const HomeMessage=()=>import('../components/HomeMessage')


//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes=[
  {
    path: '',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home,
    children:[
      {
        path: '',
        redirect:'news'
      },
      {
        path:'news',
        component:HomeNews,
      },
      {
        path: 'message',
        component: HomeMessage,
      }
    ]
  },
  {
    path:'/about',
    component:About,

  },
  {
    path:'/user/:userId',
    component:User,
  }
]

const router=new VueRouter({
  //配置路由和组件之间的映射关系
  routes,
  //表示路由的模式
  mode:'history',
  linkActiveClass:'active'
})

//3.将router对象传入到vue实例中
export  default  router

在这里插入图片描述

3.创建组件
<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页类容，哈哈哈</p>

    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>

</style>

3.3 传递参数的形式

在这里插入图片描述

1 通过params传递

配置main.js路由组件

//配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
// import  Home from '../components/Home'
// import  About from '../components/About'
// import  User from '../components/User'

const  Home=()=>import('../components/Home')
const  About=()=>import('../components/About')
const  User=()=>import('../components/User')
const HomeNews=()=>import('../components/HomeNews')
const HomeMessage=()=>import('../components/HomeMessage')


//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes=[
  {
    path: '',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home,
    children:[
      {
        path: '',
        redirect:'news'
      },
      {
        path:'news',
        component:HomeNews,
      },
      {
        path: 'message',
        component: HomeMessage,
      }
    ]
  },
  {
    path:'/about',
    component:About,

  },
  {
    path:'/user/:userId',
    component:User,
  }
]

const router=new VueRouter({
  //配置路由和组件之间的映射关系
  routes,
  //表示路由的模式
  mode:'history',
  linkActiveClass:'active'
})

//3.将router对象传入到vue实例中
export  default  router

配置app.vue组件

<template>
  <div id="app">
   <!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->
    <router-link to="/home" tag="button" replace >首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
    <router-link v-bind:to="'/user/'+userId" tag="button" replace>用户</router-link>
   <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      userId:'LiSi'
    }
  }
  // methods:{
  //   homeClick:function () {
  //     this.$router.replace('/home');
  //   },
  //   aboutClick:function(){
  //     this.$router.replace('/about');
  //   }
  // }
}
</script>

<style>
  .active{
    color: white;
    background-color: red;
  }
</style>

配置user.js组件

<template>
    <div>
      <h2>我是用户界面</h2>
      <p>我要开始学习代码相关的知识了</p>
      <h3>{{userId}}</h3>
    </div>
</template>

<script>
    export default {
        name: "User",
        computed:{
          userId(){
            return this.$route.params.userId;
          }
        }
    }
</script>

<style scoped>

</style>
2 通过query传递

创建profile组件

<template>
    <div>
      <h2>我是Profile组件</h2>
    </div>
</template>

<script>
    export default {
        name: "Profile"
    }
</script>

<style scoped>

</style>

路由中配置profile组件信息

//配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
// import  Home from '../components/Home'
// import  About from '../components/About'
// import  User from '../components/User'

const  Home=()=>import('../components/Home')
const  About=()=>import('../components/About')
const  User=()=>import('../components/User')
const HomeNews=()=>import('../components/HomeNews')
const HomeMessage=()=>import('../components/HomeMessage')
const Profile= () =>import('../components/Profile')


//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes=[
  {
    path: '',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home,
    children:[
      {
        path: '',
        redirect:'news'
      },
      {
        path:'news',
        component:HomeNews,
      },
      {
        path: 'message',
        component: HomeMessage,
      }
    ]
  },
  {
    path:'/about',
    component:About,

  },
  {
    path:'/user/:userId',
    component:User,
  },
  {
    path:'/profile',
    component:Profile,
  }
]

const router=new VueRouter({
  //配置路由和组件之间的映射关系
  routes,
  //表示路由的模式
  mode:'history',
  linkActiveClass:'active'
})

//3.将router对象传入到vue实例中
export  default  router

前端显示profile信息

<template>
  <div id="app">
   <!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->
    <router-link to="/home" tag="button" replace >首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
    <router-link v-bind:to="'/user/'+userId" tag="button" replace>用户</router-link>
    <router-link :to="{path:'/profile',query: {name:'Nickel',age: 18, height: 180}}" tag="button" replace>档案</router-link>
   <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      userId:'LiSi'
    }
  }
  // methods:{
  //   homeClick:function () {
  //     this.$router.replace('/home');
  //   },
  //   aboutClick:function(){
  //     this.$router.replace('/about');
  //   }
  // }
}
</script>

<style>
  .active{
    color: white;
    background-color: red;
  }
</style>

在这里插入图片描述
接收查询参数并显示结果

<template>
    <div>
      <h2>我是Profile组件</h2>
      <p>我叫：{{this.$route.query.name}},今年{{this.$route.query.age}}岁，我身高是{{this.$route.query.height}}</p>
    </div>
</template>

<script>
    export default {
        name: "Profile"
    }
</script>

<style scoped>

</style>

3.4 导航守卫

3.41 单个进行修改

在这里插入图片描述
在这里插入图片描述
更改首页代码

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页类容，哈哈哈</p>

    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: "Home",
        created() {
          document.title='首页'
        }

    }
</script>

<style scoped>

</style>

在这里插入图片描述
更改关于代码

<template>
  <div>
    <h2>我是关于</h2>
    <p>我是关于类容，呵呵呵</p>
  </div>
</template>

<script>
    export default {
        name: "About",
      created() {
          document.title='关于'
      }
    }
</script>

<style scoped>

</style>

在这里插入图片描述

3.42 批量进行修改

修改router下面index.js
在这里插入图片描述
在这里插入图片描述

//配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
// import  Home from '../components/Home'
// import  About from '../components/About'
// import  User from '../components/User'

const  Home=()=>import('../components/Home')
const  About=()=>import('../components/About')
const  User=()=>import('../components/User')
const HomeNews=()=>import('../components/HomeNews')
const HomeMessage=()=>import('../components/HomeMessage')
const Profile= () =>import('../components/Profile')


//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes=[
  {
    path: '',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home,
    meta:{
      title:'首页'
    },
    children:[
      {
        path: '',
        redirect:'news'
      },
      {
        path:'news',
        component:HomeNews,
      },
      {
        path: 'message',
        component: HomeMessage,
      }
    ]
  },
  {
    path:'/about',
    component:About,
    meta:{
      title:'关于'
    },
  },
  {
    path:'/user/:userId',
    component:User,
    meta:{
      title:'用户'
    },
  },
  {
    path:'/profile',
    component:Profile,
    meta:{
      title:'档案'
    },
  }
]

const router=new VueRouter({
  //配置路由和组件之间的映射关系
  routes,
  //表示路由的模式
  mode:'history',
  linkActiveClass:'active'
})

router.beforeEach((to,from,next)=>{
 document.title=to.matched[0].meta.title;
  next()
})

//3.将router对象传入到vue实例中
export  default  router

3.42 实现页面的保存–当再次回到页面的时候还是原来的页面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

修改home.vue

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页类容，哈哈哈</p>

    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
   <keep-alive>
     <router-view></router-view>
   </keep-alive>

  </div>
</template>

<script>
    export default {
       data(){
         return{
           message:'你好呀',
           path:'/home/news'
         }
       },
        name: "Home",
      created() {
        console.log('Home created');

      },
      destroyed() {
        console.log('Home destroyed');
      },
       activated() {
         console.log('Home activated');
         this.$router.push(this.path)
       },
      beforeRouteLeave (to, from, next) {
        this.path=this.$route.path;
         next();
      }
    }
</script>

<style scoped>

</style>

在这里插入图片描述

3.5 Tabbar的创建过程

https://blog.youkuaiyun.com/nickel369/article/details/110541599

3.6 Promise使用方法

初始网络请求方式

    setTimeout(()=>{
        console.log('Hello World!');
        console.log('Hello World!');
        console.log('Hello World!');
        console.log('Hello World!');
        console.log('Hello World!');

        setTimeout(()=>{
          console.log('Helllo vuejs');
          console.log('Helllo vuejs');
          console.log('Helllo vuejs');
          console.log('Helllo vuejs');
  
            setTimeout(()=>{
                 console.log('Hello pyhon');
                 console.log('Hello pyhon');
                 console.log('Hello pyhon');
                console.log('Hello pyhon');
                console.log('Hello pyhon');
          },1000);
      },1000);
      }
       1000);

promise网络请求方式

<script>
    //1.使用setTimeout
    // setTimeout(()=>{
    //     console.log('Hello World!')},
    //     1000);

    new Promise((resolve,reject)=>{
        setTimeout(()=>{
           resolve()
            },1000);
    }).then(()=>{
        console.log('Hello World!');
        console.log('Hello World!');
        console.log('Hello World!');
        console.log('Hello World!');
        console.log('Hello World!');
       return  new Promise((resolve,reject)=>{
            setTimeout(()=>{
              resolve()
            },1000);
        })
    }).then(()=>{
        console.log('Helllo vuejs');
        console.log('Helllo vuejs');
        console.log('Helllo vuejs');
        console.log('Helllo vuejs');

        return new Promise((resolve, reject)=>{
            setTimeout(()=>{
               resolve()
            },1000)
        })
    }).then(()=>{
        console.log('Hello pyhon');
        console.log('Hello pyhon');
        console.log('Hello pyhon');
        console.log('Hello pyhon');
        console.log('Hello pyhon');
    })
</script>
使用 Vue CLI 创建 Vue.js 项目的详细指南
chaosweet的博客
12-31 1856
千里之行，始于足下。
Vue CLI3详细搭建过程以及vue+vuex分析
weixin_44387725的博客
06-05 2万+
一、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、...
有关vuecli的一些知识汇总
Weightlessly的博客
07-30 195
Vuecli 如果在开发大型项目时，是我们需要考虑代码目录结构，项目结构和部署，热加载，代码单元测试等事情。如果每个项目都要手动完成这些工作，那么无疑效率会很低，所以我们通常会使用一些脚手架工具来帮助完成这些事情。 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置 vuecli前提：安装Node 官网：http://nodejs.cn/download/ 检测安装版本：命令行 node -v NPM node package manager是一个NodeJS包管理和分发工具，以及成为
大前端进阶-12-vue.js-第一个cue-cli项目
LC的博客
01-17 226
vue-cli 是一个脚手架，用于快速生产一个vue的项目模块 环境配置 下载nodejs，看以前的文章 cmd输入命令 npm install cnpm -g cnpm install vue-cli -g vue list # 查看可以创建的vue模板，用webpack，实现兼容性 创建模块 随意创建一个文件夹，存储项目，进入管理员cmd该项目目录下 vue init webpack myvue cd myvue npm install #根据package.json下载文件 npm ru.
使用cue-cli脚手架创建vue项目
weixin_44448747的博客
02-13 311
1.按 windous键+R 输入 cmd 打开黑框框 2.检查是否安装npm，运行如下代码 npm -v 如果显示的是版本号，则已经安装，执行第三步 如果没有显示版本号，则需安装npm npm install npm build npm run dev 3.检查是否安装vue cli3，运行如下代码 npm -V 如果显示的是版本号，则已经安装，执行第四...
cue-cli脚手架搭建项目
木子小姐
07-02 1453
Vue两大核心思想：组件化和数据驱动。 组件化：把整体分为各个可以复用的个体，数据驱动：通过数据变化直接影响bom展示，避免dom操作。 Vue.js安装-NPM方法 1.查看版本 npm -v 2.升级npm cnpm install npm -g # 全局安装 vue-cli npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 vue...
vue-cli脚手架搭建时基础设置说明
m0_46694056的博客
10-05 441
基础选项 Check the features needed for your project: (✳) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序 (✳) Rout
Vue Cli与BootStrap结合实现表格分页功能
08-29
Vue Cli与BootStrap结合实现表格分页功能 该资源主要介绍了如何使用Vue Cli与BootStrap结合实现表格分页功能。下面是相关知识点的详细说明： 一、Vue Cli简介 Vue Cli是基于Vue.js的命令行工具，用于快速构建Vue....
解决vuecli3.0热更新失效的问题
10-17
从提供的内容来看，以下几点是解决Vue CLI 3.0热更新失效问题的关键知识点： 1. 控制台警告检查：开发过程中，控制台的警告信息是不容忽视的，它可能会提示存在影响热更新的问题。开发者需要仔细阅读警告信息，并...
详解项目升级到vue-cli3的正确姿势
12-02
Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建 Vue 项目。Vue CLI 3 是其第三个主要版本，带来了许多改进和优化。在将项目从旧版本的 Vue CLI 升级到 Vue CLI 3 时，需要遵循一定的步骤以确保顺利过渡。...
基于vue cli 通过命令行传参实现多环境配置
10-18
在现代的软件开发过程中，环境配置对于项目的构建和部署至关重要。...以上知识点共同构成了通过Vue CLI和命令行传参实现多环境配置的基础知识框架，为Vue项目的开发和维护提供了便捷的操作方法和重要的理论基础。
什么是Vue-CLI?
weixin_40408910的博客
07-30 1万+
一、背景介绍 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 二、知识剖析   vue-cli是vue.js的脚手架，用于自动生成vue.js+webpa...
Vue基础入门---Vue-cli 教程
热门推荐
evior
09-02 4万+
Vue-cli是vue官方出品的快速构建单页应用的脚手架，如果你是初次尝试Vue，我不建议使用，推荐你老老实实用普通引入javascript文件的方式进行学习（你可以去看我的vue视频教程的1-4季），这里牵扯的东西很多，有webpack，npm，nodejs，babel等等，很容易产生从入门就放弃的思想。 Vue-cli 一、安装vue-cli 安装vue-cli的前提是你已经安装了npm...
vux在vue-cli生成项目中的配置
github_36160167的博客
03-06 1133
vue-cli生成项目 vux-loader vue-cli生成项目初步的代码环境 使用vue-cli脚手架工具生成cue项目，之后npm install vux –save-devvux使用的样式文件是less格式，千万一定要安装less-loadervux-loader*这是vux的团队为了vux也是为了vue项目工程化 npm install vux-loader–save-dev 之
Vue-CLI详解
输入技术、输出想法
04-28 2万+
Vue-CLI详解Vue-CLI详解Vue CLICLI是什么意思?拉取 2.x 模板 (旧版本)Vue CLI2创建项目目录结构详解Runtime-Compiler和Runtime-only的区别render和templateVue程序运行过程render函数的使用Vue CLI3创建vue-cli3目录结构详解配置去哪里了？修改配置箭头函数基础语法 Vue-CLI详解 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI;如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue C
watch 数组 Vue 3
qq_30049249的博客
05-01 293
发现在选项式中配置 watch 监听数组不起作用。且在 setup 中监听数组时，当不设置 deep 参数时，也进行了深度监听。在 setup 中使用 watch 监听数组变化。
游戏开发的Typescript(2)禁忌函数 - 类 eval()函数
最新发布
wgc2k的博客
05-02 834
在 TypeScript 里，eval()是个内置函数，其作用是对字符串形式的 JavaScript 代码进行解析并执行。
字节跳动在GitHub上有哪些开源项目
interpromotion的博客
04-23 1706
字节跳动（ByteDance）在GitHub上开源了许多项目，涵盖前端、后端、云原生、AI、数据库等多个领域。这些项目体现了字节跳动在技术领域的广泛投入，适合开发者学习或直接应用于生产环境。
Vue CLI 3 配置详解与技巧
在本例中，文件名为 vuecli3-config.zip，它可能包含了 Vue CLI 3 配置相关的文件，包括项目配置、说明文档、示例代码等。压缩包的格式为.zip，这是一个广泛使用的压缩文件格式，支持跨平台，能够压缩文件大小，方便...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值