vue-cli学习笔记-vue-cli的安装

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue-cli是vue官方提供的脚手架工具，默认搭建好了一个项目的基本架子，我们在其基础上进行相应修改即可。

github下载地址：链接

全局安装vue-cli

cmd命令

npm install -g @vue/cli


查看版本/是否安装成功 vue -V

初始化Vue项目

  1. vue create vue-demo

    按键盘上下键可以选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了， 继续手动一下

    选择手动配置Manually...

  2. 选择配置

    空格键是选中与取消，A键是全选

    选项说明:

    1. TypeScript 支持使用 TypeScript 书写源码

    2. Progressive Web App (PWA) Support PWA 支持

    3. Router 支持 vue-router

    4. Vuex 支持 vuex

    5. CSS Pre-processors 支持 CSS 预处理器

    6. Linter / Formatter 支持代码风格检查和格式化

    7. Unit Testing 支持单元测试

    8. E2E Testing 支持 E2E 测试

  3. 选择将这些配置文件写入到什么地方 (In dedicated config files)

  4. 是否保存这份预设配置？（n）

  5. 运行项目 cd vue-demo , npm run serve


    访问localhost:8080

解读项目的目录结构

main.js

   Vue.config.productionTip = false


$mount手动挂载

import Vue from 'vue'
import App from './App.vue'
//阻止启动生产消息
Vue.config.productionTip = false
// $mount手动挂载
/*
  render:function(createElement){  //ES5的写法
    return createElement(App)
  }
  render(createElement){  //ES6的写法
    return createElement(App)
  }
  render(h){  //ES6的写法的简写
    return h(App)
  }
   render: h => h(App);//最终写法
 */
new Vue({
  render: h => h(App),
}).$mount('#app')

index.html

App.vue

引入组件的方式



以上是 vue-cli学习笔记-vue-cli的安装 的全部内容， 来源链接： utcz.com/z/375926.html

回到顶部