1. vue create vue04创建一个vue04;如果没有网络怎么办?在有网络的情况下,先打包vue04,如果没有网络又想创建新的项目,就解压缩,就可以运行了
2. vue04
3. 创建后,进入vue04,再运行npm run serve
4. 了解npm run serve的执行顺序
--> 1. 读取package.json 【script】
--> 2. 读取serve, 通过脚手架启动项目"vue-cli-service serve"
--> 3. 访问路径:
--> 4. 运行入口程序 (src-->main.js)
--> 看main.js
4.1. 读取的是node_modules下面的vue, 里面有源码
4.2. 后缀名是vue的模板,App.vue模板(有:界面template, 脚本script, style样式)
4.3. 产品提示是否关闭 (阻止生产消息)
4.4. 开启产品提示来观察下
4.5. webpack: 2种模式
development mdoe 开发模式(更多的调试性)
production mode 产品模式(更好的性能)
提醒你发布的时候,要改为产品模式,即改为false
5. 代码: 创建vue对象(ViewModel),挂载到index.html中的app div (如果把public里面的index.html中div的id修改了,页面就报错了,说明是挂载到这里)
界面---数据模型---桥梁搭建起来 new Vue
来认识下这段代码
const app = new Vue({ router, data: { name: '小明' }, render: h => h(App) }); app.$mount('#app'); console.log(app);
console:
同:
const app = new Vue({ router, el: '#app', data: { name: '小明' }, render: h => h(App) }); app.$mount('#app');//$mount挂载,注销掉一样 console.log(app);
如果注释掉render函数,会报错
(要么一个预编译的模板中在render函数中,要么编译包含在里面,否则模板编译器不能用)
理解:render: h => h(App) (就是包含了一个预编译模板)
6. 加载预编译模板App.vue文件 (包含界面template, 脚本script, style样式,看4.2正好引入了,后面就是加载了这个预编译文件), 并且传入render函数,进行渲染
7. 看起来的效果,就像是App.vue就是根层入口
8.
9. 创建vue05, 安装router和vuex
src-->main.js-->多了router和store(store勾选vuex后产生的)