开局先开挂--创建Vue脚手架
====================== cmd命令 =====================
为了防止下载过慢先配置 npm 淘宝镜像
npm config set registry https://registry.npm.taobao.org
全局安装@vue/cli。(脚手架,安装一次就行了)
npm install -g @vue/cl【如果安装过程卡住了,敲回车就行】【注意:警告是作者可能用了一些东西导致的,不用管】【安装完先关掉,再进去cmd,输出Vue,看看是否安装完毕】
切换到你要创建项目的目录,然后使用命令创建项目
vue create xxxx
【xxxx是你创建的文件名称 创建完毕会生成 脚手架+Hello Would】【起名字的时候要注意回避一些主流库的名字】
进入创建的文件目录下,运行项目
cd xxxx --- npm run serve
或先从进入该文件,再打开cmd --- npm run serve
最后生成的文件
分析文件【注意:不要随便乱改文件名】
Ctrl + ~ (esc下面那个键) :可以打开 vscode 终端,然后输出 npm run serve 即可打开浏览器页面
public文件
favicon.ico是页面图标 , index.html解析如下图
src文件
1、src下的component文件是赋值我们自定义的组件,最后注册在App.vue(生成vue_exercise文件就有了)上面
2、src文件下的App.vue(统领所有组件)结构和上图差不多,但是我们需要在script标签引入我们自定义的组件和注册该组件
<script> //引入School组件 import School from "./components/School"; export default { name: "App", components: { School }, }; </script>
3、src文件下的main.js,建立一个Vue实例,并注册App组件
引入Vue 以前是在html中通过script标签引入Vue.js的 这个js只是删减版vue.runtime.xxx.js 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函数去指定具体内容。 --------------------------------------------------------------------------- import Vue from 'vue' // 引入App import App from './App.vue' // 关闭Vue的生产提示 Vue.config.productionTip = false // 创建vm new Vue({ el:'#app', render: h => h(App) }) --------------------------------------------------------------------------- // 完整版Vue才能这么写 template:`<h1>你好啊</h1>`, components:{App}, --------------------------------------------------------------------------- 是什么原因呢 原因:模板解析器占Vue.js的三分之一容量,最后打包上传用了webpack打包,而webpack已经把 .Vue 翻译成 .js 该解析的模板都解析完了, 这个时候模板解析器就没有什么作用了(即某天我们最终写完代码,并把模板转换为最纯粹的文档,这个时候模板解析器就没有什么存在的必要了),打包可以省点空间,所以我们需要用render去解析模板 --------------------------------------------------------------------------- // 当你使用残缺版的Vue时,还想创建元素,用下面的这个 render(creatElement) { // 参数是一个函数 console.log(typeof creatElement); // function // <h1>你好啊</h1> 下面加引号,是因为 h1 是html内置元素 return creatElement('h1', '你好啊') } // * 简写 render:q=> q('h1','你好啊')