Vue CLI

<h1>插件</h1> <a href="http://www.jqhtml.com/26285.html" target="_blank">Vue2.5+ Typescript 引入全面指南</a> <ol> <li> <a href="https://github.com/vuejs/vue-class-component" rel="nofollow noreferrer">vue-class-component</a><br>强化 Vue 组件，使用 TypeScript/装饰器 增强 Vue 组件</li> <li> <a href="https://github.com/kaorun343/vue-property-decorator" rel="nofollow noreferrer">vue-property-decorator</a><br>在 vue-class-component 上增强更多的结合 Vue 特性的装饰器</li> <li> <a href="https://github.com/ktsn/vuex-class" rel="nofollow noreferrer">vuex-class</a><br>基于vue-class-component对Vuex提供的装饰器</li> </ol> <h2>vue-class-component</h2>

1、确保已经安装了npm 或者 yarn 　　查看是否安装了npm或yarn：在控制台输入npm -v 或 yarn -v 能看到版本号就代表已经安装 　　（注意：Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)） 2、全局安装vue脚手架工具 vue-cli (这里安装的是vue-cli 2.X 的脚手架工具） yarn global add vue- cli # OR npm install -g vue-cli 安装后，可以在控制台输入 vue --version 验证是否安装成功） 另： 　　如果要安装3.X的脚手架工具，输入命令： yarn global add @vue/ cli # OR npm install -g @vue/cli //如果是用3.X的脚手架工具，还需要安装@vue/cli-init才能使用 vue init命令 yarn global add @vue/cli-init # OR npm install -g @vue/cli-init 3、使用vue-cli初始化项目 控制台切换到你的项目存放路径，输入： vue init <template-name> <project-name> <template-name> : 模板名称，vue-cli提供了5中模板： ①webpack : 一个全面的webpack

利用vue组件创建模板，使用webpack打包生成插件再全局使用 1、vue init webpack-simple 生成项目目录 2、调整目录结构 3、修改webpack.config.js var path = require('path' ) var webpack = require('webpack' ) module.exports = { entry: './src/index.js' , output: { path: path.resolve(__dirname, './dist' ), publicPath: '/dist/' , filename: 'vue-toast.js' , // 打包后的格式（三种规范amd,cmd,common.js)通过umd规范可以适应各种规范，以及全局window属性 libraryTarget:'umd' , }, module: { rules: [ { test: /\.vue$/ , loader: 'vue-loader' , }, { test: /\.js$/ , loader: 'babel-loader' , exclude: /node_modules/ }, ] }, plugins:[] } 开发一个toast插件，可以借助npm平台发布，在这里就不做过多的说明了 toast.vue <template

webpack 一款打包工具，负责项目打包 原生使用webpack配置非常麻烦（入口，输出，加载器，插件），因此使用vue-cli打包工具（即：vue脚手架）可以极大简化webpack打包流程 vue-cli安装 sudo npm install -g vue-cli 使用vue-cli初始化 进入项目目录 -> sudo vue init webpack -> 提示是否在当前目录下生成？y -> 下载模板 -> 输入项目名称？（通常默认）Enter -> 项目描述？（默认有一个可以直接回车）Enter -> 作者？（默认会有一个当前用户）Enter -> VUE构建？选择RunTime+Compiler即可 -> 是否安装vue-router？ y -> 是否使用ESLint ？ n -> 启用单元测试？ n -> n -> 最后一步选择Yes 常用文件： build/　　　　　　 该目录下存放的是webpack打包使用的配置文件，base.js是基础文件，dev.js是开发环境使用的，prod.js是生产环境使用的 config/index.js　　主配置文件，端口号就在这里配置 dist/　　　　　　　该目录下放的是打包后的目录和静态文件， 需要注意：整个项目只有一个index.html文件 main.js　　　　　 js的入口文件 index.html　　　

从三个插件开始 1、CommonsChunkPlugin commonsChunkPlugin 是webpack中的代码提取插件，可以分析代码中的引用关系然后根据所需的配置进行代码的提取到指定的文件中，常用的用法可以归为四类：（1）、提取node_modules中的模块到一个文件中；（2）、提取 webpack 的runtime代码到指定文件中；（3）、提取入口文件所引用的公共模块到指定文件中；（4）、提取异步加载文件中的公共模块到指定文件中。下面就具体说明以上四种用法。 1.1 提取node_modules中的模块 贴一段vue-cli 生成的代码 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks(module) { // any required modules inside node_modules are extracted to vendor // 所有在node_modules中被引用的模块将被提取到vendor中 return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) }

vue+nodejs+express+mysql 建立一个在线网盘程序 目录 vue+nodejs+express+mysql 建立一个在线网盘程序 第一章 开发环境准备 1.1 开发所用工具简介 1.2 安装 MySQL 1.2.1 下载安装 MySQL 1.2.2 可能出现的问题和解决方案 1.3 安装 vue-cli 1.4 安装 express 第二章 数据库设计和创建 2.1 数据库和表设计 2.2 user 表 2.3 file 表 2.4 创建数据库和表所用 sql 语句参考 第三章 后台模块开发 3.1 创建数据库连接 3.2 创建表模型 3.3 编写接口 3.3.1 定义接口 3.3.2 编写控制器文件 3.4 接口测试 第四章 前端模块开发 4.1 安装并引入前端开发所需外部模块 4.2 建立路由 4.3 编写组件 代码戳这里--> code 第一章 开发环境准备 1.1 开发所用工具简介 主要开发所用工具: MySQL、Express、NodeJS、Vue 其他工具: element-ui、axios 1.2 安装 MySQL 1.2.1 下载安装 MySQL 参照: MySQL 安装 | 菜鸟教程 1.2.2 可能出现的问题和解决方案 1.提示:Found option without preceding group in config file:XXX;

菜单快捷导航： vue项目创建 vue路由router知识点(路径参数、查询参数、命名路由、嵌套路由、命名视图、hash/history模式 ) vue导航守卫（全局守卫、单个路由独享、组件级守卫） 1、创建一个vue项目步骤 （windows环境下）。创建vue项目前，检查系统是否具备创建项目的条件（是否已经安装好了node.js、webpack、vue-cli）。cmd打开终端。 1.1 如果还没安装node.js， 则先安装 node.js ，安装完成后，查看node版本 node -v 1.2 安装淘宝镜像， 安装完成后查看npm版本：npm -v npm install -g cnpm --registry=https: // registry.npm.taobao.org 1.3 安装webpack npm install webpack -g 1.4 安装vue全局脚手架，vue-cli2.x使用 npm install -g vue-cli ， vue-cli3.x使用 npm install -g @vue/cli 安装， 查看vue版本： vue -V npm install -g vue-cli 　　或 npm install -g @vue/cli 1.5 准备工作做好了，开始正式创建vue项目 ， 创建vue项目可以选择两种方式。下面的my_vue

需求 首先介绍一下本项目的背景，是基于 vue-cli3.1.1 的单页应用，目前测试环境和生产环境都在线上，并且都在同一个域名下，其中生产环境部署在根目录下，测试环境部署在名为 test 的子目录下，根据生产环境和测试环境的不同，某些界面和交互有细微的差别。 根据以上项目的基本情况，分析出需求如下： 实现区分线上生产环境和线上测试环境的环境变量，供项目代码中全局使用。 实现输入一行命令，执行两条指令，分别打包线上生产环境和线上测试环境的代码。 实现打包之后，自动将打包好的文件夹分别按照项目名+时间+环境的格式压缩成 zip 文件 配置环境变量和模式 根据 vue-cli3 文档，可以通过设置项目根目录下的 .env ， .env.[mode] 文件来指定环境变量。 创建一个 .env 和 .env.beta 文件，在 .env 文件中，配置如下： VUE_APP_URL = '/' // 用来设置项目的 baseUrl 和路由的 base 选项 默认是根目录 VUE_APP_MODE = '' // 设置一个变量 区分线上生产环境和线上测试环境 默认是生产环境 outputDir = 'dist' // 用来设置打包后生成的文件夹的名字，默认为 dist 文件夹 在 .env.beta 文件中，配置线上测试环境，如下： NODE_ENV = 'production' //

vue-cli3出来很久了，之前一直使用vue-cli2的配置，并且区分了生产和开发环境，自己的理解，环境分两大类，开发环境 和生产环境 对于命令来说，就是dev和build的区别， 一般都会有预发布和正式生产两个环境区别 预发布 就使用预发布的接口 正式的就使用正式的接口 对于程序员来说，本地测试也需要测试预发布的接口和生产的接口，上线也需要区分上到预发布或者上到生产 所以根据这些的不同，分成了两大部分，每一部分都分了预发和正式 具体可以参照下图 根据这些不同呢，就在package.json中区分了四种情况 然后在项目根目录下新建4个对应的文件就好 环境变量下最好手动指定一下NOED_ENV，因为开发环境不会压缩js，而打包之后需要压缩js ，然后在api中就可以读取到具体的mode了 还要说一个比较重要的，就是打包分析了，具体可以参考这篇文章：（ https://blog.csdn.net/maquealone/article/details/99674246 ） 自己实践了，截几张图出来吧： 先下载如下两个包： 然后在vue.config.js中 然后在package.js编写脚本 好了，大功告成！！！ 说个题外话，项目开发经常是cli2和cli3并存的，官方呢，非常贴心的提供了方法让这两者共存，官方说法如下，自己实践了下，还是挺好用的，靠谱 npm install -g

今天，我们使用Vue CLI3 做一个移动端适配 。 前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 复制代码 2、在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render : h => h(App), }).$mount( '#app' ) 复制代码 3、在 index.html 编辑 viewport <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > <!-- 加上以下代码 --> < meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" > <