基于Vue2的移动端开发环境搭建详解

2020-06-16 06:05:13易采站长站整理

前言

vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧。

一、vue-cli

首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程

全局安装 vue-cli


npm install vue-cli -g

借此也全局安装一个 webpack


npm install webpack -g

注意这里可能会有坑,墙内的用户安装失败,没关系,我们先安装淘宝镜像


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

然后通过以下命令安装 webpack


cnpm install webpack -g

注:下面 orange 默认给出 npm 的安装方案,安装失败请自行转为 cnpm 安装

在需要创建工程的位置运行


vue init webpack-simple 工程名字<工程名字不能用中文>

或者创建 vue1.0 的项目,只需将命令换成


vue init webpack-simple#1.0

这里我们基于 2.x 开发的,直接使用第一种方法创建工程即可,下图是创建工程时的截图,需要你添加

Project name
Project description
Author
.

图中已经给出下一步应该操作的步骤,我们按照步骤一步一步执行,这里 orange 不给大家一步一步列出。

注意:这里一定要使用

npm install 
安装官方库,而不要使用淘宝镜像,会导致部分依赖丢失。
安装完成后,目录如下图。

然后我们运行我们的项目后浏览器会自动弹出,并展示以下页面

这里注意观察,默认给我们八个链接,可以根据这几个链接获得我们想要的学习资源,上面是必要的的链接(官方文档以及关注 vue 动态),下面是 vue 的生态系统,大家亲切的叫它们为全家桶。

二、Vue 全家桶