专栏首页前端vueVue-cli脚手架

Vue-cli脚手架

NPM安装

首先下载nodejs 官网地址:https://nodejs.org/en/

下载完成后打开命令行(安装过node后可以更便捷的用shift+右键选择在当前文件夹打开命令行)

命令行输入 node -v 查看node版本 验证是否安装成功

淘宝镜像 (可选)

如果网速不好可以选择使用淘宝镜像 走的是国内的网 地址如下:

cnpm --registry=http://registry.npm.taobao.org

安装过淘宝镜像后就可以在命令行输入cnpm代替npmle

安装cli脚手架构建工具

命令行输入 cnpm(npm) install -g vue-cli 安装

初始化一个项目

vue init webpack firstVue

这个命令中 webpack是构建工具,也就是说整个项目是基于webpack的。firstVue是整个项目文件的名称,在这个文件中自动生成你指定的目录

运行后会要求输入项目名称 地址等信息 ,可以直接回车略过

package.json中 dependencies&&devDependencies是项目需要的依赖包

进入项目文件夹 firstVue文件夹。运行命令 cnpm install 安装所需依赖

安装完成后再firstVue文件中会多出一个node_modules文件 这里面就是我们项目所需要的依赖资源

到此就可以运行项目了 直接命令行输入 npm run dev 使用webstorm的可以在左下角直接输入npm run dev 浏览器会自动打开一个页面

//如果没有自动打开 可以手动输入localhost:8080

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue自定义弹窗组件(一)npm包管理

    npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 6000...

    RtyXmd
  • 基于CodeIgniter&Vue-cli构建前后端分离

    这是正常CI给的初始页面,CI让我们更改welcome_message文件更换视图,具体方法在controllers/welcome中,但是我们并不需要,因为视...

    RtyXmd
  • 开发一套个人vue组件库

    使用vuePress开发,她能够很好的嵌入vue组件代码,使得文档能够准确的加载并预览组件,vuePress怎么使用可以看上一篇文章 VuePress搭建永久文...

    RtyXmd
  • node的事件模块应用(译)

    第一次接触Node.js时,就觉得他只不过是用javascript实现的服务端。但实际上他提供了许多浏览器端不具备的方法,比如EventEmitter类。我们在...

    IMWeb前端团队
  • CNN初探

    http://www.cnblogs.com/fydeblog/p/7450413.html

    努力努力再努力F
  • MJRefresh 封装

    MJRefresh是很好用的一个刷新控件,但是如果在每个ViewController中都加入如下代码

    赵哥窟
  • linux shell 发送email 附件

    mutt -s "mail subject" -a output_email.html -- tomail@163.com < output_email.htm...

    阳光岛主
  • Xilinx FPGA底层资源介绍

    XILINX FPGA 芯片整体架构如下所示,整个芯片是以BANK进行划分的,不同的工艺、器件速度和对应的时钟具有不同的BANK数量(下面截图是以K7325tf...

    瓜大三哥
  • Android应用ANR分析

    在Android中,程序的响应性是由Activity Manager与Window Manager系统服务来负责监控的,当系统检测到下面的条件之一时会显示ANR...

    用户1205080
  • dotnet更新扫描

    https://github.com/TencentCloud/tencentcloud-sdk-dotnet/blob/master/TencentCloud...

    算法发

扫码关注云+社区

领取腾讯云代金券