频道栏目
首页 > 资讯 > win7激活工具 > 正文

Windows下vue-cli的项目构建教程

18-05-31        来源:[db:作者]  
收藏   我要投稿

首先,安装vue-cli需要安装node.js,需要使用其中的npm命令

node.js官网 : https://nodejs.org/

傻瓜式安装之后 在命令行中输入 npm -v 若是能得到版本号则说明npm安装成功接着安装 vue-cli ,在命令行中输入

npm install -g vue-cli 

即可全局安装 vue-cli,此过程需要一定的时间

若是觉得npm下载太慢可以选择淘宝镜像 cnpm 进行下载
npm config set registry https://registry.npm.taobao.org

验证方法

npm config get registry

下载完成之后可以使用 cnpm 代替 npm 其他不变,下载会快一些

接下来就是构建项目

找一个文件夹作为项目的工作区(workspace) 然后在命令行中找到这个文件夹 (快捷方法:进入文件夹之后 shift + 鼠标右键 -> 在此处打开命令行 此方法在Win8 和 Win7 上测试可用 Win10 不清楚),执行命令

vue init webpack 你的项目名称

之后会有一系列的选择,基本一直回车就可以了

值得注意的是会让你选择是否 install vue-router 这个是vue路由组件,绝大部分情况会需要这个,最好选yes。

后面还有问需要测试文件的,可选可不选,如果没用到就可以不选,选了不用也没啥影响

在一段漫长的等待之后,项目就构建完成了,这个时候命令行进入项目根目录下,执行

npm install

安装一些依赖,虽然不知道有啥用,但是貌似不执行这个的话启动会慢,还会出现一些奇怪的问题,而且从网上直接扒源码之后也需要执行这个命令一次才可以正常打开

命令执行完毕之后就可以启动了,在项目的根目录下打开命令行,执行

npm run dev

等待一段时间启动,启动完成之后就可以看到打开vue欢迎页的地址,一般会是 http://localhost:8080/ 如果8080端口被占用,这个可能会打开 8081 这样的其他端口。

启动成功之后访问地址即可看到 vue 的欢迎界面,说明启动成功

后端菜鸟快速使用前端vue框架笔记,一切为能用服务。

相关TAG标签
上一篇:解决AndroidStudio Gradle方式引用第三方库重复依赖的问题
下一篇:移动开发购物车功能开发
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站