vue2基础知识点（6）脚手架vue-cli

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

推荐阅读

脚手架的安装与使用

安装 npm install -g @vue/cli
创建项目 vue create projectName

选择vue官方为我们提供的两个配置好的选项或者自定义，这里我们选择自定义，来介绍所有的选项，键盘方向键上下选择，空格勾选，回车确认当前页的选择。

选择vue版本

选择history路由模式还是hash模式

选择css预处理器

选择代码规范检验工具

选择代码规范检验工具是在保存时生效还是在提交的时候

将babel、eslint等工具的配置信息保存在哪

是否要把你这次的选择保存为一个选项

保存并为其添加一个test名字，这样在下次创建项目时，可以直接选择test选项来创建项目

脚手架的main.js文件

/* 
	该文件是整个项目的入口文件
*/
//引入Vue，引入的是残缺版的，消除了模板解析核心代码，查看package.json中的module可以看到引入的文件是什么
// import Vue from 'vue'


// 完整版,引入完整版的包括模板解析核心代码，因此可以不写成render形式，可以直接配置template项,但是文件会比残缺版
// 大小大，项目上线的时候使用webpack打包的时候，webpack会打包多余的模板解析代码，浪费空间
import Vue from '../node_modules/vue/dist/vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

/* 
	关于不同版本的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函数去指定具体内容。
*/

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

    // render的完整形式,,,,模板渲染的时候会自动调用render函数
    render: function(createElement) {
        // return createElement('h1','你好啊')
        return createElement(App)
    }

    // template:`<h1>你好啊</h1>`,
    // components:{App},
})

脚手架中修改webpack的配置

项目根目录下新建一个webpack.config.js文件

控制台执行vue inspect > output.js将配置文件信息打包成一个output.js文件展示出来

结束啦！