详解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项目打包压缩的实现(让页面更快响应),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要为大家推荐了一篇值得收藏和学习的vue.js最细致的基础语法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
今天小编就为大家分享一篇解决vue 表格table列求和的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
lottie实现vue自定义loading指令及常用指令封装详解
这篇文章主要为大家介绍了lottie实现vue自定义loading指令及常用指令封装，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
使用vue-virtual-scroller遇到的问题及解决
这篇文章主要介绍了使用vue-virtual-scroller遇到的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue3中实现拖拽排序代码示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能时应选用vue-draggable-next插件,传统的draggable插件不兼容Vue3,可能导致TypeError错误,安装后,需在项目中引入并使用,具体步骤包括安装插件、引入使用、查看效果和相关说明,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了解决vue+elementui项目打包后样式变化问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue3全局组件通信之provide / inject,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue实现子路由调用父路由的方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论