ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

一起从零开始学VUE(6) vue-cli的安装与使用

2022-01-28 17:34:06  阅读:33  来源: 互联网

标签:VUE cli vue App js Vue main


文章目录

vue-cli

基本知识

1、单页面应用程序(SPA):指的是一个web网站中只有唯一的一个html页面,所有的功能与交互都在这唯一的一个页面内完成
2、vue-cli是Vue.js开发的标准工具。简化了程序员基于webpack创建工程化的Vue项目的过程。

vue-cli的安装

vue-cli是npm上的一个全局包,使用npm install命令,即可进行下载,命令如下:
npm install -g @vue/cli

小贴士
如果跟我一样遇到npm安装vue-cli时速度慢,fetchMetadata经常卡住,可以点击参考这篇博文,亲测有效!

安装完成后,输入vue -V检查一下是否安装成功

小贴士
如果出现报错 ‘vue’ 不是内部或外部命令,也不是可运行的程序或批处理文件,可以参考一下博文进行解决
‘vue’ 不是内部或外部命令,也不是可运行的程序 或批处理文件

vue-cli的使用

1、基于vue-cli快速生成工程化的Vue项目:
在终端中输入vue create+项目名称(不能包含中文或者空格)回答一些问题即可完成创建,下面是几个问题的建议选项:
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述根据提示完成创建后,后台要保持开启终端窗口打开不能关闭。
在这里插入图片描述

vue项目中src目录的构成:

  1. assets文件夹:存放项目中用到的静态资源文件,例如:css样式、图片资源
  2. components文件夹:程序员封装的、可复用的组件都要放到该文件夹下
  3. main.js 是项目的入口文件,整个项目的运行,要先执行 main.js
  4. App.vue 是项目的根组件,定义UI结构

vue项目的运行流程

在工程化的项目中,vue通过main.jsApp.vue 渲染到 index.html 的指定区域中

  • App.vue用来编写待渲染的模板结构
  • index.html需要预留一个el区域
  • main.js把App.vue渲染到index.html所预留的区域中

main.js

//导入vue这个包,得到vue的构造函数
import Vue from 'vue'
//导入App.vue根组件
import App from './App.vue'

Vue.config.productionTip = false

//创建vue的实例对象
new Vue({
  el:"#app",
  //把render函数指定的组件渲染到html页面中
  render: h => h(App),
}).$mount('#app')

解释一下就是,用 render 函数中选中的组件(代码中选中的是App.vue根组件)来代替 el 属性所指的位置(id为app的标签)

标签:VUE,cli,vue,App,js,Vue,main
来源: https://blog.csdn.net/qq_46258819/article/details/122583618

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有