美文网首页让前端飞前端开发那些事程序员
学习不一样的vue实战(1): 环境搭建

学习不一样的vue实战(1): 环境搭建

作者: yang_子义 | 来源:发表于2017-05-31 12:02 被阅读404次

首先

因为个人的喜好和工作的需要,一直想写这样的系列教程,今天如愿以偿,但是我是第一次写,有什么错误,和指教的地方,欢迎吐槽,谢谢!

1.1.1 安装 Node.js

一般来讲, 可以用以下三种方式安装 Node.js:

  • 通过安装包安装(Windows 和 Mac 用户推荐)
  • 通过源码编译安装(Linux用户推荐)
  • 在 Linux 下可以通过 yum|apt-get 安装

Windows 和 Mac 安装:

第一步:

打开 Node官网,往下面拉,就可以看到有两个下载选项:

  • 左边的是 LTS 版,就是长期支持的稳定版本,一般人都用这个版本。
  • 右边是最新版本,支持很多最新的语言特征,对es6有更多的支持。(可以在 http://node.green 上面获取到 Node.js 各个版本对 ES6 的支持情况。)
    我们选择左边的版本点击下载。

第二步:

下载好了安装包,打开,一直点击 继续 就可以安装好了。

第三步:

安装成功后,打开终端输入下面的命令。就可以看到自己的node 和npm 安装好了没有。

Linux 用户安装:

Linux 用户可通过源码编译安装:

curl -O https://nodejs.org/dist/v6.10.3/node-v6.10.3.tar.gz
tar -xzvf node-v6.10.3.tar.gz
cd  node-v6.10.3
./configure
make
make install

备注: 这里可能会发生因为缺少依赖包而产生的编译错误。这里遇到错误的会就自行google了。

1.1.2 淘宝 NPM 镜像

  • 因为在墙的原因啊,国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
  • 淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

第一步:安装

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

第二步:使用

支持 npm 除了 publish 之外的所有命令, 如:

$ cnpm install [name]

1.2.1 vue-cli

介绍

vue-cli是官方的项目构建工具,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目。

第一步 安装

npm install -g vue-cli

如果用npm下载速度慢,可以使用cnpm.

第二步 选择模板

所有的官方项目模板在vuejs-templates。如果有新的模板添加进来,你需要使用下列命令,

vue init <template-name> <project-name>

也可以使用 vue list 来查看官方模板列表。

目前可用的模板包括:

  • browserify--全功能的Browserify + vueify,包括热加载,静态检测,单元测试
  • browserify-simple--一个简易的Browserify + vueify,以便于快速开始。
  • webpack--全功能的Webpack + vueify,包括热加载,静态检测,单元测试
  • webpack-simple--一个简易的Webpack + vueify,以便于快速开始。
  • simple - 单个HTML文件中最简单的Vue设置

1.3.1 第一个vue项目

第一步 生成项目

我们的项目选择webpack,使用以下命令

 vue init webpack vue-todos

前面就一直点回车就行了,后面使用ESLint,测试就选择no就行。

第二步 运行项目

输入下面的命令就可以运行这个项目了。

     cd vue-todos
     npm install
     npm run dev

这是时候就会自动打开端口 http://localhost:8080/#/
你会看到这样的页面。那我们就成功了。

相关文章

  • 2019-04-02

    课表安排 vue环境安装 vue绑定事件 vue计算属性 vue判断与循环 CDN实战DEMO vue脚手架的搭建...

  • 学习不一样的vue实战(1): 环境搭建

    首先 首发博客: 我的博客 项目源码: 源码 项目预览: 预览 因为个人的喜好和工作的需要,一直想写这样的系列教...

  • Vue实战1-环境搭建

    初始化项目 这里我们使用vue-cli来自动生成vue.js项目的模板。 安装Node.js 用npm安装vue-...

  • django-基础知识学习

    djanjo实战环境搭建 虚拟环境搭建 具体内容详见环境搭建 mysql 和 pycharm使用自行学习 djan...

  • vue实战开发:详解vue-cli 3.0项目搭建

    vue实战开发:详解vue-cli 3.0项目搭建 1 将node所在目录配置到电脑的环境变量中就可以使用了,这里...

  • Vue学习(1)-环境搭建

    环境准备 node.js+npm是必备的开发环境。为了方便命令行的输入,可以选择下载Git客户端。安装好node....

  • vue学习(1)-环境搭建

    安装brew,不知道是不是mac专属。输入 /usr/bin/ruby -e "$(curl -fsSL http...

  • Vue(7)

    一、环境搭建 下面我们需要为后面要做的Vue项目搭建开发环境。 1、基本的运行环境 该项目使用node& vue在...

  • ELK 搭建及实战

    ELK 搭建及实战 JDK1.8环境搭建和Kibana实战部署 ELK介绍和JDK1.8环境搭建 实战环境 Cen...

  • vue-cli单页面应用

    vue-cli是vue搭建环境脚手架,只需要几个命令就可以搭建开发环境。 vue-cli脚手架搭建 1.安装nod...

网友评论

    本文标题:学习不一样的vue实战(1): 环境搭建

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