npm

一 单文件组件介绍 二 如何安装Vue-Cli3脚手架 三 快速原型开发 四 vue-cli3生成项目 五 购物车项目搭建 六 购物车项目操作 七 Mock模拟数据 八 Vue中使用第三方组件（element-ui） 九 Element的表单组件分析 十 表单组件设计-Input实现双向数据绑定 十一 表单组件-设计FormItem组件 十二 表单组件设计-如何正确设计表单校验规则 十三 表单组件设计-Form组件检验方法完结 一 单文件组件介绍 /* * 在vue中 把.vue的文件称为 单文件组件 webpack等构建工具 * * 很多项目中使用 * Vue.components('组件名'，{}) * new Vue({}) * 用在中小规模的项目中 会很好 但是大型的项目 就不友好了 * * 有哪些缺点 * 1. 全局定义 每个名字都不能重复 * 2. 字符串模板【还好的是es6提供了模板字符串】遇见特殊的符号时 要用 反斜杠来转义 很繁琐 * 3. 不支持css * 4. 没有构建步骤 * * * 以后的模块化开发 包括了 template style script * */ 二 如何安装Vue-Cli3脚手架 ① 安装node.js 　　 https://nodejs.org/en/download/ 　　保证Node.js 是8.9或者更高的版本 　　在终端 node

目标 Grunt是一个简单好用的js文件压缩和合并工具，当一个页面需要加载过个js文件时，合并多个js文件可以减少http请求次数，提高页面加载速度。另外，Grunt的uglify功能可以起到混淆和隐藏js代码逻辑作用。 安装nodejs和Grunt命令行 Grunt运行nodejs环境中，通过npm进行安装。Grunt 0.4.x 需要Node.js 版本 >= 0.8.0。 nodejs的安装这里不再赘述，可以根据使用的操作系统选择合适的方式进行安装。例如在Centos系统下可以用如下命令安装： yum install -y nodejs 更新npm到最新版本： npm update -g npm 然后安装Grunt命令行环境 npm install -g grunt-cli 配置Grunt工程环境 一个Grunt工程环境就是Grunt要在其中工作的目录，配置完毕后可以对该目录下的js进行压缩和合并。 假设我们的工程目录结构如下： ./ ./js ./dist ./ 为我们的而工程根目录 js 目录下存放需要压缩合并的js文件 dist 目录存放我们稍后合并输出的文件。 在工程根目录下放置两个文件： package.json 和 Gruntfile.js 。 这是两个必要的文件，也是最重要和容易出错的环节，一定要记着将你最新编辑的文件放置到工程根目录下。 package

最近公司要开一个新项目，领导要求使用vue-cli 3.0搭建项目框架，然后遇到了一系列的问题。 1、vue-cli 3.0安装 npm install -g @vue-cli 注意：以管理员身份安装，刚开始没有使用管理员报错了。。。 安装成功，开始创建项目 npm create <项目名> 再次报错：node版本不匹配，我的是v6.9.4，vue-cli 3.0要求node版本在v8.0. 以上 2、升级node.js 1 . 第一步 npm - g install n 2 . 第二步 n stable （更新至最新稳定版本） 附带常用命令 n // 会列出所有安装的版本供你切换 n latest // 安装最新版本 n stable // 安装最新稳定版 我遇到的问题是 n 安装不成功。 解决方法看这篇文章吧 https://www.cnblogs.com/ifannie/p/8995585.html 3、下载vue-cli 3.0的项目，运行npm install 报错： 查了资料说是npm版本的问题，我想我更新了node版本，可能是npm版本没有更新。 npm cache clean --force 翻译了一下： 从812个贡献者和1739个包中添加了12899个包 发现79个漏洞（22个低，39个中等，18个高） 运行“NPM审计修复”来修复它们，或“NPM审核

写在前面的话： 文章是个人学习过程中的总结，为方便以后回头在学习。 文章中会参考官方文档和其他的一些文章，示例均为亲自编写和实践，若有写的不对的地方欢迎大家和我一起交流。 VUE基础系列目录 《VUE基础系列（一）——VUE入坑第一篇》 《VUE基础系列（二）——VUE中的methods属性》 《VUE基础系列（三）——VUE模板中的数据绑定语法》 《VUE基础系列（四）——VUE中的指令（上）》 《VUE基础系列（五）——VUE中的指令（中）》 一.v-model v-model是作用于input/textarea等 表单控件 的双向数据绑定指令，当我们修改表单元素的内容，会自动的更新vue中的数据 #示例　 <! DOCTYPE html > < html > < head > < title > vue中的指令(中) </ title > < script type ="text/javascript" src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></ script > </ head > < body > < div id ='box' > < input v-model ='msg' type ='text' /> < br > 这里是msg的值：{{msg}} </ div > < script type =

删掉package-lock.json再试试 npm install 时出现很多 npm WARN tar ENOENT: no such file or directory, open ' Try also deleting package-lock.json before npm install npm init -f npm init -f 命令行的作用：一个模块不管是否安装过， npm 都要强制重新安装，可以使用 -f 或 --force 参数。 清空缓存 sudo chown -R 1000:1000 "/home/user/.npm" npm cache clean -f sudo chown -R $USER:$(id -gn $USER) /home/user/.config 换源 npm config set registry https://registry.npm.taobao.org npm install --registry=https://r.cnpmjs.org/ 安装n sudo npm cache clean -f sudo npm install -g n sudo n stable fix 79 packages are looking for funding run npm fund for details found 25

1、ERR引发的思考 创建好的 vue 项目直接执行 vue run dev 报错？运行 vue run serve 就可以启动...如下 npm run dev npm ERR! missing script: dev npm ERR! A complete log of this run can be found in: npm ERR! E:\nodejs\node_cache\_logs\2018-12-12T15_06_08_674Z-debug.log 2、dev build serve? 其实 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要这么写。 npm run XXX是执行配置在 package.json 中的脚本，比如： "scripts": { 　　"serve": "vue-cli-service serve", 　　"build": "vue-cli-service build", 　　"lint": "vue-cli-service lint" }, npm run xxx 中的 xxx 可以理解为键值对的 key，实际上 run 的是在 package.json 里面 scripts 配置的 value； 比如，npm run serve 实际运行的是 vue-cli-service serve；