介绍

Vue.js是一套构建用户界面的渐进式框架。
Vue 只关注视图层,采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。


阅读之前需要了解的知识

  • htnl
  • css
  • javascript
  • node.js环境(npm包管理工具)
  • webpack打包工具

安装node.js

node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了。
安装完成后,打开命令行工具输入命令node -v,如下图,如果出现对应版本号,就说明安装成功了。

我们所需要的npm包管理器,是集成在node中的,所以,直接输入npm -v就会如下图所示,显示出npm的版本信息。

到这里node的环境已经安装完了,npm包管理工具也有了,但是由于npm的有些资源被墙,为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。


安装cnpm

点击进入淘宝的cnpm网站,里面有详细的配置方法。
或者直接在命令行输入:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

然后等待,安装完成。

输入cnpm -v,可以查看当前cnpm版本,这个和npm的版本还是不一样的。

使用cnpm的方法就是,需要用到npm的地方直接使用cnpm替换就可以了


vue安装

在用 vue.js 构建大型应用时推荐使用 npm 安装,npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。

$ cnpm install vue


安装vue-cli脚手架构建工具

vue-cli 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

# 全局安装 vue-cli
$ cnpm install --global vue-cli

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

要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。可以使用:

#my-project为自定义项目名
$ vue init webpack my-project

初始化一个项目,或使用

 $ vue init webpack-simple my-project

初始化一个简单的项目

运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。

需要注意的是项目的名称不能大写,不然会报错。

Project name (my-project) # 项目名称(我的项目)

Project description (A Vue.js project) # 项目描述一个Vue.js 项目

Author 作者(你的名字)

Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])

Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)

Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N)

Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)

当然这些都看你自己个人的情况,我这里是全选了是。


安装项目所需要的依赖

刚初始化的项目是没有依赖的,如果运行会报类似这样的错误,

所以在这之前需要解决项目的依赖问题,使用下面的命令安装项目的依赖。

 $ cnpm install

如果出现如下图情况,说明依赖解决成功。


运行项目

$ cnpm run dev

如果看到这个界面,说明配置成功

借鉴----https://blog.csdn.net/xinpz/article/details/81871785

Vue2.0 搭建Vue脚手架(vue-cli)的更多相关文章

  1. 基于vue2.0搭建项目流程

    搭建vue2.0项目--myproject 一. 环境搭建: 1 打开命令行(cmd) 2 安装node node官网 3 安装 vue-cli步骤如下: npm install -g vue-cli ...

  2. Vue:Vue2.0搭建脚手架

    随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架. 一.安装node.js 1.进入官网https ...

  3. vue2.0搭建vue手脚架(vue-cli)

    1.安装node.js 从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了.安装完成后,打开命令行工具输入命令node -v,如下图,如果出现对应版本号,就说明安装成功了. ...

  4. Vue脚手架(CLI)第一天

    vue 1.脚手架的搭建(CLI) 1.1.下载nodejs,在官网, [nodejs官网地址][ https://nodejs.org/en/ ] 无脑下一步就可以了.环境自动安装 1.2.下载脚手 ...

  5. Vue2.0搭建脚手架流程

    介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 安装node.js ...

  6. Vue2.0搭建脚手架(vue-cli)

    一.安装node.js 进入官网下载node.js 二.安装 cnpm 1.说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理 ...

  7. Vue2.0使用vue-cli脚手架搭建

    一:安装node.js Node.js官网:https://nodejs.org/en/download/ 选择相应的版本即可安装 通过node自带的npm包管理工具 二.安装依赖 安装依赖:npm ...

  8. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

  9. Vue2.0学习笔记:Vue事件修饰符的使用

    事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

随机推荐

  1. LeetCode算法题-Missing Number(Java实现-四种解法)

    这是悦乐书的第200次更新,第209篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第65题(顺位题号是268).给定一个包含n个不同数字的数组,取自0,1,2,...,n ...

  2. keepalived 安装篇-个人实践-编译安装

    官网地址:http://www.keepalived.org/官网文档:http://www.keepalived.org/documentation.html Keepalived的作用是检测服务器 ...

  3. 前端性能优化成神之路--SSR(服务端渲染)

    Nuxt.js的介绍 Nuxt.js概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用V ...

  4. cookie 处理 以及模拟登陆

    cookie的处理 1.手动处理: cookie封装到headers 2.自动处理: 1.获取一个session对象 2.使用session对象进行请求的发送 3.作用:在使用session进行请求发 ...

  5. centos7下升级SSH

    Linux 发行版中集成的 SSH 软件版本都比较老,存在着一些漏洞和安全隐患,需要升级 SSH 服务软件修补漏洞提升系统安全. SSH:SSH 有许多标准,通常 Linux 中 ( Redhat, ...

  6. 启动PHP study时提示80端口或者3306端口被占用的解决办法

    一.查看PID WIN+R打开命令行------>netstat -ano+回车,就会显示下面的信息: 二.打开任务管理器 Ctrl+Alt+Delete------>任务管理器,找到对应 ...

  7. 如何利用pip自动生成和安装requirements.txt依赖

    在查看别人的Python项目时,经常会看到一个requirements.txt文件,里面记录了当前程序的所有依赖包及其精确版本号.这个文件有点类似与Rails的Gemfile.其作用是用来在另一台PC ...

  8. 机器学习算法总结(三)——集成学习(Adaboost、RandomForest)

    1.集成学习概述 集成学习算法可以说是现在最火爆的机器学习算法,参加过Kaggle比赛的同学应该都领略过集成算法的强大.集成算法本身不是一个单独的机器学习算法,而是通过将基于其他的机器学习算法构建多个 ...

  9. ssh原理图解

    SSH(Secure Shell)是一种能够以安全的方式提供远程登录的协议,也是目前远程管理Linux系统的首选方式.在此之前,远程登录一般常用FTP和Telnet,但是它们以明文的形式在网络中传输账 ...

  10. VS2015中配置Eigen

    Eigen非常方便矩阵操作,当然它的功能不止如此.矩阵操作在算法研究过程中,非常重要,例如在图像处理中二维高斯拟合求取光斑中心时使用Eigen提供的矩阵算法,差不多十来行代码即可实现. 1)下载Eig ...