[JavaScript知识库]vue入门学习知识要点总结（四），脚手架的使用与理解

接上一篇文章继续总结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教程及资料。

欢迎交流