欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue入门学习知识要点总结(四),脚手架的使用与理解

程序员文章站 2022-06-06 21:36:59
...

接上一篇文章继续总结Vue的入门知识,这里主要是关于脚手架的使用和理解

脚手架

脚手架说明

  1. Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。可以帮助提高开发效率。
  2. 最新的版本是 4.x。
  3. 官方文档: https://cli.vuejs.org/zh/

使用步骤

第一步(仅第一次执行):全局安装@vue/cli。(注:在cmd命令行下,需要安好node,下同)

npm install -g @vue/cli

第二步:切换到你要创建项目的目录,然后使用命令创建项目 (xxx为项目目录名称,应为英文路径)

vue create xxx

第三步:启动项目 (需要先进入项目路径下)

npm run serve

备注

  1. 如出现npm下载缓慢可配置淘宝镜像源:npm config set registry https://registry.npm.taobao.org
  2. Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置, 请执行:vue inspect > output.js

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue  自定义的组件
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件

关于不同版本的Vue

1.vue.js与vue.runtime.xxx.js的区别:

​ (1).vue.js是完整版的Vue,包含:核心功能+模板解析器。

​ (2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。

2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容。

//main.js文件是整个项目的入口文件,以下是他的配置


import Vue from 'vue'  //引入Vue
import App from './App.vue' //引入App组件,它是所有组件的父组件
Vue.config.productionTip = false //关闭vue的生产提示

//创建Vue实例对象---vm
new Vue({
	el:'#app',
	//render函数完成了这个功能:将App组件放入容器中
	render: h => h(App),
    //template:`<App></App>`,
	//components:{App},
})

本文参考了vue官方文档和脚手架文档及尚硅谷张天禹老师的vue教程及资料。

欢迎交流