Vue最全实战教程系列(1): 环境搭建
栏目: JavaScript · 发布时间: 6年前
内容简介：Vue最全实战教程系列(1): 环境搭建
首先
- 首发博客:我的博客
- 项目源码: 源码
- 项目预览:预览
因为个人的喜好和工作的需要,一直想写这样的系列教程，今天如愿以偿，但是我是第一次写，有什么错误，和指教的地方，欢迎吐槽，谢谢!
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/#/
你会看到这样的页面。那我们就成功了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 实战 Prometheus 搭建监控系统
- go micro实战01：快速搭建服务
- 实战：用Microsoft 365搭建零信任网络
- 「实战」搭建完整的IM（即时通讯）应用（1）
- 「实战」搭建完整的IM（即时通讯）应用（2）
- 「小程序JAVA实战」springboot的后台搭建（30）
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
