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

Ryan_Li 发布于2019-08-05 11:21 / 2548人阅读

摘要：淘宝镜像是一个完整镜像，你可以用此代替官方版本只读，同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。

首先

首发博客: 我的博客

项目源码: 源码

项目预览: 预览

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

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

也可以使用 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/#/
你会看到这样的页面。那我们就成功了。

idc机房托管混合云样式不一样备案姓名不一样 java不一样 linux数据结果不一样

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56310.html

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

摘要：淘宝镜像是一个完整镜像，你可以用此代替官方版本只读，同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首发博客: 我的博客项目源码: 源码项目预览: 预览因为个人的喜好和工作的需要,一直...

BoYang 2019-08-29 12:41 评论0 收藏0
学习不一样的vue实战(1): 环境搭建

摘要：淘宝镜像是一个完整镜像，你可以用此代替官方版本只读，同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首发博客: 我的博客项目源码: 源码项目预览: 预览因为个人的喜好和工作的需要,一直...

Atom 2019-08-20 16:59 评论0 收藏0
学习不一样的vue实战(1): 环境搭建

摘要：淘宝镜像是一个完整镜像，你可以用此代替官方版本只读，同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首发博客: 我的博客项目源码: 源码项目预览: 预览因为个人的喜好和工作的需要,一直...

OnlyLing 2019-08-01 16:56 评论0 收藏0
webpack+vue项目实战（五，监听路由，实现同个页面不同状态的切换）

摘要：好了，闲话不多说今天要说的时利用监听路由的方式，实现同个页面不同状态的切换。只要等于，那么页面就是待确认回款页面进入待确认回款页面中，回款状态的筛选标签要加上。 1.前言今天发完这一篇，就要这个系列告一段落了！以后如果有什么要补充的会继续补充！因为在后台管理项目上，搭建的话，主要就是这样了！还有的一些是具体到交互的处理，那个是要根据后端的需求，来进来比较细化的工作，我在这里就不说了！...

guyan0319 2019-08-20 17:47 评论0 收藏0
比官方文档更易懂的Vue.js教程！包你学会！

摘要：目前专注前端图片优化与新技术的探研。还有一点必须要知道的是，是国人写的，技术文档也妥妥的是中文，想到这我就有学习的动力。注意到，等都是页面也可以是组件，接着注册路由器，然后开始配置路由。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏蔡述雄，现腾讯用户体验设计部QQ空间高级UI工程师。智图图片优化系统首席工程师，曾参与《众妙之门》书籍的翻译工...

DandJ 2019-08-23 12:07 评论0 收藏0