随笔分类 - Vue框架（VUE Cli 2 ）
是真的多....好散的知识！！！
摘要：路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. 维基百科 路由器提供了两种机制: 路由和转送. 路由是决定数据包从来源到目的地的路径. 转送将输入端的数据转移到合适的输出端. 生活中的路由： 路由中有一个非常重要的概念叫路由表. 路由表本质
阅读全文
摘要：你在终端写 vue ui 即可进入， 一般都不在这里创建项目，一般都是直接导入，然后看项目详细： 所以一些依赖和插件 你完全可以图形化安装！ 很方便啊！这里面什么都能配！！！ 隐藏的配置文件哪里去了？？？？？打开 vuecli3：node_modules -> @vue -> cli-service
阅读全文
摘要：我的vue版本的4 的 但是很多教程都是讲3 下面讲解下： vue create project-one （这个图是网上随便找的 因为我.....这步跳过了....可以明显发现版本不对） 一般都是手动选一下啊 3也是一样的，那就是最后一个选项了 Manually select features： 第
阅读全文
摘要：我们用 VUE2 那个 vue init webpack new_project 创建后是这样的： 上面那个是没选esLine 代码规范。 详解： 所以 里面的webpack 配置你有空可以去研究，发现里面很多也是通过 配置合并 static 这个目录下是放静态文件的 比如图片啊什么的 .babel
阅读全文
摘要：官网说很多种方式，这里命令的方式， 你想在哪里创建CMD命令窗口 就 进入到哪里的目录，然后： 因为这里用的是脚手架2来装 所以命令是： vue init webpack XXXX 其中XXX是项目名 其次呢 不要是中文 而且 里面貌似不能有大写字母 这里在 这个 hbuiderX里面新建 反正这个
阅读全文
摘要：Vue CLI 就是脚手架了 如果网络出错超时频繁 推荐用 淘宝镜像 非常快！ 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情 CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架 Vue CLI是一个官方发
阅读全文
摘要：webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实 现我们想要的让浏览器自动刷新显示我们修改后的结果。 不过它是一个单独的模块，在webpack中使用之前需要先安装它： npm install --save-dev webpack-
阅读全文
摘要：在项目发布之前，我们必然需要对js等文件进行压缩处理，我们就对打包的js文件进行压缩，我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致。 修改webpack.config.js文件，使用插件： const uglifyJsPlugi
阅读全文
摘要：我们的index.html文件是存放在项目的根目录下的。但是 在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js 等文件也就没有意义了 所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWeb
阅读全文
摘要：'使用一个最简单的插件，为打包的文件添加版权声明，该插件名字叫BannerPlugin，属于webpack自带的插件。 按照下面的方式来修改webpack.config.js的文件： 其实就是 最上面定义的 const path 和 最下面的 plugins 可以看到 其实就是写 ： plugins
阅读全文
摘要：如果我们希望将data中的数据显示在界面中，就必须是修改index.html,如果我们后面自定义了组件，也必须修改index.html来使用组件,但是html模板在之后的开发中，并不希望手动的来频繁修改. 定义template属性： 在前面的Vue实例中，我们定义了el属性，用于和index.htm
阅读全文
摘要：在我们的webpack环境中集成Vuejs： 我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装，因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖： npm install vue --save 然后你就可以在JS文件中【一般有 new Vue 都要写 ， 或
阅读全文
摘要：include：导入 exclude：排除 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 { test: /\.m?js$/, exclude: /(node_modules|bower_components
阅读全文
摘要：如果你在CSS中引用了图片，那么： 这里两张照片 1张a 一张b a是大于8KB b 是小于8KB的： 直接打包会报错 我们需要 图片处理，我们使用url-loader来处理，依然先安装url-loader： npm install --save-dev url-loader 安装即可 版本自己加
阅读全文
摘要：如果我们希望在项目中使用less、scss、stylus来写样式， 我们这里以less为例，其他也是一样的。 我们还是先创建一个less文件，依然放在css文件夹中： 这里 创建了 Less 并且 写了 样式。 老样子 我们在入口写入依赖 让webpack解析并打包： 然后我们安装 对应的 load
阅读全文
摘要：新建一个s1.css 里面让body背景颜色显红色，那么就要打包一起生效，打包因为有入口js，所以我们就要在入口js添加依赖，然后加载用到loader 我们用npm安装css-loader，最后嵌入DOM显示 要用到 style-loader，这里的顺序肯定是 先 css-loader 后 styl
阅读全文
摘要：什么是loader？ “依赖” 这个词很重要 loader是webpack中一个非常核心的概念。 webpack用来做什么： 在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的 依赖。 但是，在开发中我们不仅仅有基本的js代码处理，我们也
阅读全文
摘要：如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可 以将这两个参数写到配置中，在运行时,直接读取。 创建一个webpack.config.js文件 【目前这个文件名是写死的】 const path = require('path') //请先执行 npm in
阅读全文
摘要：我们在工程新建两个文件夹，一个是 src 用于存放我们写的源文件，一个是 dist文件夹：用于存放之后打包的文件。 类似这样： 一般都是在src中写一个 项目的入口文件，一般叫 index.js 但我这写main.js 看得出即可。 因为src文件夹下写源文件 而且 有了入口文件，那么我们用webp
阅读全文
摘要：At its core, webpack is a static module bundler for modern JavaScript applications. 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 我们从两个点来解释上面这句话：模块 和 打包
阅读全文