分享

Vue.js---脚手架vue-cli傻傻的分不清楚

 小样样样样样样 2021-10-28

------------恢复内容开始------------

Vue.js---脚手架vue-cli傻傻的分不清楚

B站视频地址:https://www.bilibili.com/video/BV1n7411T78U

 

  1.     node.js--->>npm(git, maven) 完整的生态圈
  2.                     --> 下载其他模块
  3.     下载webpack 3.0和4.0版本  手动搭建vue.js
  4.     vue-cli 2.x  3.x  4.x(1.可以基本忽略大量的webpack配置  2.直接支持更新) 
  5. SPA: single page appilication 单页面应用程序,通过vue-router路由来跳转到不同的模块
  6. unit tests(按空间切割,对每个组件都进行测试); e2e tests(按时间事件,对每个流程进行测试)
  7. node.js   express;webpack-dev-server支持热更新

 

 

1. 下载node.js, 安装npm, 安装vue

可以参考这篇:https://www.cnblogs.com/jane-panyiyun/p/12113539.html

 

2. 静态资源

 

 

3. node.js webpack-dev-server 热更新

 

 代码段改变界面也改变了

 

4. 简化代码,体会模块,template的view层,脚本里面的数据模块

<template>
  <div id="app">123{{kk}}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { kk: "456" };
  }
};
</script>

<style>
</style>

console: 

 

 

 

5. 在config--> index.js -->修改module.export下面的build 静态文件的path, 在assetsPublicPath处加个点改为绝对路径,可以打开页面。实际工程中可能也会写一个url

 

 

6. 升级vue

 

 

按提示先删后装

 

最新的vue安装成功

 

 

 

7. 继续安装vue03

提示选择默认的设置,babel是必要的,把es6的代码转为es5的代码,兼容大部分的浏览器

 

 

也可以手动选择,typesricpt是es6的超集, PWA是基于谷歌框架的移动端支持,css预处理器例如postcss/sass/less

 

 

参考如下

 

 

 

 

 

 本次项目的创建设置如下:

 

 选好设置,创建中

 

 

PS: 上面的我的路径都装错了,装在了vue01里面后面重新修改了

 

8. 创建了新的vue02

 

 

配置里面依赖少很多了

 

 

9. 运行看看,npm run serve

 

 

页面:

 

 

 

10. npm run bulid

 

 

 

 

 

 

 

 

11. 升级vue

 

 

 

 

 

 

 

  

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多