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

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

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)

相关推荐

  • Vue-Cli脚手架搭建详细步骤

    vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK. 1.安装 ...

  • vue cli4构建基于typescript的vue组件并发布到npm

    基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...

  • 贼 Cool:使用脚手架 vue-cli 来搭建 Vue 环境

    贼 Cool:使用脚手架 vue-cli 来搭建 Vue 环境

  • 如何搭建一个vue-cli4+webpack移动端框架?本文详解

    简介 这是基于 vue-cli4 实现的移动端框架,其中包含项目常用的配置,组件封装及webpack优化方法,可供快速开发使用. 技术栈:vue-cli4 + webpack4 + vant + ax ...

  • 基于 Vue 的 Electron 项目搭建

    Electron 应用技术体系推荐 目录结构 demo(项目名称) ├─ .electron-vue(webpack配置文件) │ └─ build.js(生产环境构建代码) | └─ dev-cli ...

  • npm(nodejs package manager)、webpack、Vue组件、Vue脚手架开发工具、Vue Router的使用、Vuex的使用、使用Django前后端交互

    13.8 npm(nodejs package manager) 使用命令行安装包: 1. cd切换到项目目录下,执行初始化操作 npm init/npm init -y 2. 安装其他依赖包 npm ...

  • 7个实用的 Vue.js 工具和库

    前端技术优选 昨天 以下文章来源于前端迷社区 ,作者小迷妹 大家好,我是为前端娱乐圈操碎了心的小迷妹,正宗前端开发一枚,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效 ...

  • vue.js的安装

    公司要开始分配给我做前后端分离项目了555555555555 让我一个java的去了解vue并且还要会搭建=-= 莫得办法那么就开始必不可少的安装环节吧: 第一步! 安装node.js: 首先进入官网 ...

  • .net core3.1 webapi + vue.js + axios实现跨域

    我所要讲述的是,基于.net core3.1环境下的webapi项目,如何去使用axios对接前端的vue项目 既然谈到axios,这里贴出axios的官方文档地址: http://www.axios ...

  • Vue.js权威指南

    一.遇见Vue.js 1.MVP,从MVC演化而来,Controller/Presenter负责逻辑的处理,完全把View和Model进行了分享,主要的程序逻辑在Presenter里实现,与具体的Vi ...

  • 揭秘 Vue.js 九个性能优化技巧

    这篇文章主要参考了 Vue.js 核心成员 Guillaume Chau 在 19 年美国的 Vue conf 分享的主题:9 Performance secrets revealed,分享中提到了九 ...

  • 邂逅Vue.js – 初始及安装

    邂逅Vue.js中要学习的内容大纲: 1.初识Vue.js (1)为什么学习Vue.js (2)简单认识一下Vue.js 2.Vuejs安装方式 (1)CDN引入 (2)下载和引入 (3)NPM安装管 ...

  • Vue.js开发移动端经验总结

    相对于PC端来说,移动端设备分辨率百花齐放,千奇百怪,对于每一个开发者来说,移动端适配是我们进行移动端开发第一个需要面对的问题. 在移动端我们经常可以在head标签中看到这段代码: <meta  ...

  • 细说 Vue.js 3.2 关于响应式部分的优化

    译过来就是 ref API 的读效率提升约为 260%,写效率提升约为 50% ,依赖收集的效率提升约为 40%,同时还减少了约 17% 的内存使用. 这简直就是一个吊炸天的优化啊,因为要知道响应式系 ...

  • Vue.js 可排序表格 (Sortable & Searchable Table) 组件

    可排序表格 (Sortable & Searchable Tables) 在网页和表单设计中非常常用.用户可以通过点击表头对将表格以该列做顺序或降序排列,也可以利用 Search Box 对表 ...