美文网首页程序员
vue-cli 安装指南

vue-cli 安装指南

作者: chasing_dream | 来源:发表于2018-03-19 21:57 被阅读13次

vue-cli的搭建

脚手架运行前需要: node环境、npm包管理工具

第一次搭建:步骤

1、node -v
2、npm -v 或者 cnpm -v
3 、vue -V 检查是否全局安装
如果没有安装可以选择安装淘宝的或者国外的
安装淘宝镜像/国外镜像
淘宝 $ npm install -g cnpm --registry=https://registry.npm.taobao.org \ 国外 npm install vue

全局安装 vue-cli

$ npm install --global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

$ cd my-project

安装依赖,走你

$npm install

$ npm run dev

后续安装:
1、vue init webpack my-project
2、cd my-project
3、npm install 4、 npm run dev

$ vue init webpack my-project--------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd my-project
npm install
npm run dev

计算属性(computed)

模板内的表达式不应该包含太多的逻辑,对于任何复杂逻辑,都应当使用计算属性
我对计算属性的理解是:计算属性是需要复杂的逻辑和很多组件基础状态最后才能得到其正确值的属性
computed属性和methods不同的是计算属性是基于它们的依赖进行缓存的。

 computed:{
    totalPrice(){
      return 66
    }
  }

计算属性与Methods的区别

计算计算属性是基于它们的依赖进行缓存的;
只要它的依赖message没有发生改变,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数
Methods :只要发生重新渲染,method调用总会执行该函数

相关文章

  • vue 学习第一节

    全局安装vue-cli: cnpm install vue-cli -g 安装vue-cli之前要全局安装vue和...

  • vue-cli 安装指南

    vue-cli的搭建 脚手架运行前需要: node环境、npm包管理工具 第一次搭建:步骤 1、node -v2、...

  • Vue 第一天

    使用vue-cli,快速创建项目 安装Vue-cli vue-cli 在国外,安装慢,需通过国内镜像安装 安装国内...

  • Vue-cli 安装和目录结构解析

    一、安装vue-cli 安装vue-cli前提,你的电脑已经安装好了Node.js,因为vue-cli 安装是给予...

  • Vue-cli基础

    Vue-cli基础 安装步骤 1、全局安装Vue-cli: npm install vue-cli -g 2、查看...

  • Vue.js高仿饿了么笔记(一)

    Vue-cli 安装 安装node 通过npm安装Vue-clinmp install -g vue-cli /...

  • (Vue全家桶)Vue-cli

    Vue-cli Vue-cli是vue官方出品的快速构建单页应用的脚手架 安装vue-cli 安装vue-cli的...

  • vue-cli的安装

    vue-cli的安装 cnpm install -g vue-cli 检查是否安装成功 vue 安装webpack...

  • Vue-cli基础

    安装步骤 1、全局安装Vue-cli: npm install vue-cli -g 2、查看是否安装成功: ...

  • 程序员使用的脚手架

    一、vue (前台) vue-cli: # 安装vue-cli。 安装之前首先确保你已经安装好了nodejs 而...

网友评论

    本文标题:vue-cli 安装指南

    本文链接:https://www.haomeiwen.com/subject/hpysqftx.html