详解Vue使用命令行搭建单页面应用

 更新时间:2017年05月24日 14:36:00   作者:温柔的敲敲敲  
本篇文章主要介绍了详解Vue使用命令行搭建单页面应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

使用命令行搭建单页面应用

我们来看一下最后完成的效果:

大纲

1. 下载 node, git, npm

2. 使用命令行安装一个项目

一、 下载工具

node, git 的下载大家可以去官网自行下载就可以了。

下面说一说安装 npm,npm 是在以上两个都安装的情况下才可以的。

国内直接 git npm 非常慢,所以我们到 taobao 的 npm 镜像下面去下载安装 镜像地址>>

打开安装好的 git bash

1 . 在 Git Bash 输入镜像的地址:

下载成功后,输入 cnpm -v 看看是否安装成功了

2 . 安装好 npm 下面就好办了,我们回到 Vue 官方网站看使用命令行安装步骤: 猛戳回到官网>>

按照上面的步骤进行安装:( 以上只要是 npm 的都要改成 cnpm )

1. 全局安装 vue-cli $ cnpm install -g vue-cli

2. 创建一个基于 " webpack "的模板的项目 $ vue init webpack my-pro

接下来会有一系列的问题:

3. 安装依赖 $ cd my-pro 切换到刚才创建的 my-pro 目录下面

4. 输入 $ cnpm install 下载依赖 node_module 模块 可以在目录下面看到 node 依赖模块已经下载好了。

5. 到了最后一步了:输入 cnpm run dev

由于我一开始创建过一个项目,node 的 8080 端口被占用了,所以下面就报错了,如图:

一个简单粗暴的方法就是关闭当前的 node 进程:

最最最最最最最最最最最最最最最最最最最最最最最最最最最后一步:

下面我们打开 http://localhost:8080 看看吧。终于成功了!!!

PS: 记录一些命令

1. $ cnpm install --global vue-cli

2. $ vue init webpack-simple demo

3. $ cd demo/

4. $ cnpm install

5. $ npm run dev

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue实现输入一位数字转汉字功能

    vue实现输入一位数字转汉字功能

    这篇文章主要介绍了vue实现输入一位数字转汉字功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue项目中的遇错:Invalid Host header问题

    vue项目中的遇错:Invalid Host header问题

    这篇文章主要介绍了vue项目中的遇错:Invalid Host header问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Django Vue实现动态菜单和动态权限

    Django Vue实现动态菜单和动态权限

    本文主要介绍了Django Vue实现动态菜单和动态权限,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • vue3中安装使用vue-i18n实时切换语言且不用刷新

    vue3中安装使用vue-i18n实时切换语言且不用刷新

    这篇文章主要介绍了vue3中安装使用vue-i18n实时切换语言不用刷新问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue项目配置使用flow类型检查的步骤

    vue项目配置使用flow类型检查的步骤

    这篇文章主要介绍了vue项目配置使用flow类型检查的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 浅谈Vue初学之props的驼峰命名

    浅谈Vue初学之props的驼峰命名

    这篇文章主要介绍了浅谈Vue初学之props的驼峰命名,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示

    Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示

    这篇文章主要介绍了Vue+ECharts实现中国地图的绘制以及拖动、缩放和各省份自动轮播高亮显示,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • 利用nodeJS+vue图片上传实现更新头像的过程

    利用nodeJS+vue图片上传实现更新头像的过程

    Vue是一套构建用户界面的框架,最近工作中遇到了一个需求,需要做一个更新头像的通能,下面这篇文章主要给大家介绍了关于利用nodeJS+vue图片上传的相关资料,需要的朋友可以参考下
    2022-04-04
  • Vue项目使用localStorage+Vuex保存用户登录信息

    Vue项目使用localStorage+Vuex保存用户登录信息

    这篇文章主要为大家详细介绍了Vue项目使用localStorage+Vuex保存用户登录信息,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • Vue实现路由嵌套的方法实例

    Vue实现路由嵌套的方法实例

    嵌套路由顾名思义就是路由的多层嵌套,这篇文章主要给大家介绍了关于Vue实现路由嵌套的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-11-11

最新评论