vue-cli

最近新做了一个项目，因为完全是另起炉灶，可以抛开历史问题，重新尝试新的思路与解决方案。也兢兢业业的踩坑俩月，把项目初版跑上线了。这一版主要是保证功能流程没问题，下一版会对开发流程、性能、错误监控等问题进行优化。截至目前记录的一些问题先抽空整理下。 如题，项目采用 vue-cli + es6 + axios 这三个作为基础跑起来的，依然是移动端，考虑兼容性 安卓4.1 & ios7.1 ，刚开始引入了jq，后续发现完全没必要，就引入了axios的ajax库，然后其他采用原生 JavaScript 及 ES6 进行开发，也没遇到什么大的问题。 Axios github地址： https://github.com/axios/axios 在此之前一直用的JQ的 $.ajax ，引入axios后还是有一些不一样的坑要慢慢习惯。 请求参数方式不一致 axios中， get 请求和 post 请求携带参数的方式不一样，具体如下： axios.get(url, { params : { id : 123456 } }).then( res => {}) axios.post(url, { id : 123456 }).then( res => {}) 解决方案是基于axios简单封了一个 fetch.js ，以简化、统一调用 返回值更多信息 在jq的回调函数中，我们后端返回的数据直接放在参数中

vue-cli 官方对 - 静态资源的介绍 这里 vue cli 3 里面也大同小异，3 只是把 static 改成了 public 文章目录 # 指定 - 输出目录： /dist # 指定 - 静态资源文件名：static # 拷贝 - /static目录 到 /dist/static目录 结论：关于 /static 目录 # 指定：编译后的名字（或者目录） # url-loadder 的 limit 属性 # 结论：关于 /src/assets 目录 # 官方建议【推荐:star::star::star:】 我们都知道 在 vue-cli2 中 /static - 放不需要“编译”的文件 ，因为最终会被复制到 /dist/static 目录 。 如：放图片、视频、字体… /src/assert - 放需要“编译”的文件 如：放 js、css、vue、图片（需要压缩或转换格式） 但源码怎么做到的呢？下面看下一 # 指定 - 输出目录： /dist 默认是 输出到 /src/dist 目录下 （看下图） 输出目录，看 webpack 的 output path ，其值来自 config.build.assetsRoot （下图） config 在 /config 目录下指定 （下图）最终，就是 /dist # 指定 - 静态资源文件名：static 在看 /static 目录

最近看了下vue的框架,随手做了个项目,记录分享下 技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图 主要是配置的是npm 打包命令 和引入vue-route vue的路由文件 和element ui 文件 下面这个是 引入echart.js 文件, 基本资料就这些。 首先我们开始构建一个vue-cli项目 1.首先node环境（这里就不多啰嗦了） 2.执行vue-cli命令 npm install --global vue-cli （这里你可以全局装，也可以装到项目路径） 3.检查下 vue是否装好 vue -V （能看到版本号就是安装成功了） 4.用vue新建一个项目 vue init webpack my-project ESLint规范建议开启，加强代码规范 （中间遇到 ESLint可以自己选择开启 或者关闭） 5.弄好项目后 npm install 下 初始化下包 6.最后进入项目路径 执行 npm run dev 命令 如果能看到页面 证明项目搭建成功 更加详细的配置 请参考 http://www.cnblogs.com/pearl07/p/6247389.html 上面已经完成了vue-cli项目的基本构建 vue+webpack已经集成了 这时候我们需要构建两个页面 看下路由功能

本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Hello.vue │ └── main.js └── static webpack 配置 主要对 build 目录下的 webpack 配置做详细分析 webpack.base.conf

首先查看npm版本 npm 是node的命令 没有的先安装node 然后执行 npm install -g vue-cli 　　如果执行这句命令有问题，则需要将npm的仓库地址改为淘宝镜像 　　　　npm install -g cnpm --registry= https://registry.npm.taobao.org 　　　　然后再用cnpm安装vue-cli。 　　　　cnpm i -g vue-cli 创建 vue项目 　　vue init webpack <项目名称> 　　后面根据提示选择或输入对应的字符串 　　进入项目目录之后 执行npm run dev vue就运行起来了 注意： 如果改变了npm的仓库地址仓库地址 则后面的 npm install 要改为 cnpm install 去安装vue的依赖 　　　　将启动命令 npm run dev 改为 cnpm run dev 　　 来源： https://www.cnblogs.com/brucexl/p/11020438.html

1、使用命令 在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。 这是你使用默认 preset 的项目的 package.json： { “scripts”: { “serve”: “vue-cli-service serve”, “build”: “vue-cli-service build” } } 你可以通过 npm 或 Yarn 调用这些 script： npm run serve 或者 yarn serve 如果你可以使用 npx (最新版的 npm 应该已经自带)，也可以直接这样调用命令： npx vue-cli-service serve 2、vue.config.js vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。 你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。 // vue.config.js module.exports

ue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 GitHub地址是： https://github.com/vuejs/vue-cli 一、安装Nodejs 首先需要安装Node环境。安装完成之后，可以在命令行工具中输入 node -v 和 npm -v ,如果能显示出版本号，就说明安装成功。 二、安装vue-cli 安装好node之后，我们就可以直接全局安装vue-cli: npm install -g vue-cli 使用这种方式可能会安装比较慢，推荐大家使用国内的淘宝镜像来安装。(之前安装过了就不过多赘述了) cnpm install -g vue-cli 如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存 安装完成后，可以使用vue -V(大写的V)查看vue的版本。 如果接下来你不知道要干嘛，那么你可以在命令行中输入 vue -help 它会有以下提示： 懂点英语的意思应该能看到提示的信息，聪明的你此时接下来执行vue list看看有哪些可用的官网模板： vue list Vue.js官方提供了两种类型的模板项目： 基于vue cli和browserify的项目模板 基于vue cli和webpack的项目模板 vue

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 一、安装node.js 二、安装vue-cli npm install -g vue-cli 三、生成项目 vue init < template-name > < project-name > template-name为生成项目使用的模板，可以运行vue list查看所有可用的官方模板。 例如： vue init webpack my-project 命令输入后，会进入安装阶段，需要用户输入一些信息。 Install vue-router 是否安装vue-router Use ESLint to lint your code 是否使用ESLint管理代码 Set up unit tests 是否安装单元测试 四、运行 配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。 进入项目目录，安装依赖。 npm install 项目目录结构如下： . ├── build/ # 构建脚本目录（npm run *） │ └── ... ├── config/　　　　　　　　　 │ ├── index.js # 项目配置文件 │ └── ... ├── src/　　　　　　　　　　　　　　 │ ├──

官方文档说明 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli 。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。 可以使用下列任一命令安装这个新的包： npm install -g @vue/cli # OR yarn global add @vue/cli 安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue ，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。 你还可以用这个命令来检查其版本是否正确： vue --version 总结 #卸载原先的vue-cli npm uninstall vue-cli -g #安装最新版的vue-cli npm install -g @vue/cli 参考文档 Vue官方文档 : https://cli.vuejs.org/zh/guide/installation.html 来源： CSDN 作者： David-Hsiang

vue-cli-service 机制 使用了近一年的vue-cli, 一直都不知道npm run dev 之后发生了些什么？？？随手记录下学习笔记 入口 从package.json里面可以看到 npm run dev 其实就是 vue-cli-service serve vue-cli3.0 安装的时候把vue-cli-service一并安装了，即执行了 npm install vue-cli-service --save-dev 这样就可以在./node_modules/.bin目录下查看到vue-cli-service @IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe" "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %* ) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:;.JS;=;% node "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %* ) 入口：./node_modules/@vue/cli-service/bin/vue-cli-service.js 瞅一眼vue-cli-service.js的核心代码 const Service = require('../lib/Service