震惊！vue项目居然长这个样子！！！

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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后产生的）

以上是 震惊！vue项目居然长这个样子！！！ 的全部内容， 来源链接： utcz.com/z/376087.html

回到顶部