Node.js教程 利用vue-cli搭建简单音乐网站
沉沙 2018-09-20 来源 : 阅读 868 评论 0

摘要:本篇教程介绍了Node.js教程 利用vue-cli搭建简单音乐网站,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入。

本篇教程介绍了Node.js教程 利用vue-cli搭建简单音乐网站,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入。

<


一、工具环境
1、node.js 6.10.0,目前node.js最新版本是8.7.0,可以到官网下载最新版本安装。链接://nodejs.cn/download/
2、编辑器,Hbuilder 8.8.4
3、windows 8.1
二、创建项目
1、安装node.js,默认安装在"C:\Program Files\nodejs",随node.js安装的还有包管理工具npm(关于node.js和npm更多信息可以自行上网搜索资料),打开其自带的命令行编辑器node.js command prompt(使用windows的cmd也可以),由于npm默认全局安装路径为"C:\Users\dippe_000\AppData\Roaming\npm\node_modules",不希望安装在C盘的话可以通过以下命令修改:
npm config set cache "E:\nodeJs\cache"
npm config set prefix "E:\nodeJs"

2、安装vue-cli和webpack
来到E盘目录下,分别输入运行"npm install -g vue-cli"和"npm install -g webpack",安装完成后在"E:\nodeJs\node_modules"目录下应该可以看到"vue-cli"和"webpack"文件夹,说明已经安装成功,这里如果安装报错的话可以尝试下面两种方法:
  第一种:以管理员身份运行命令行
  第二种:直接在当前目录输入以下命令
    npm config set http-proxy null
    npm config set registry //registry.cnpmjs.org/

3、用vue-cli搭建项目
在E盘新建一个工作目录作为项目目录,如"E:\workspaces\Hbuilder",然后命令行输入"cd E:\workspaces\Hbuilder"进到该目录下面,输入"vue init webpack vuetest"初始化一个vue项目。如下:

以上所有选择的意思分别为:
Project name(项目名称)
Project description(项目描述)
Author(作者)
下面是一个选项(我选择第一个)
Runtime + Compiler: recommended for most users (运行加编译)
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere  仅运行时
Install vue-router? (Y/n)    (是否安装vue-router,我选择安装)
Use ESLint to lint your code? (Y/n)     (是否使用ESLint管理代码,我选择否)
Setup unit tests with Karma + Mocha? (Y/n)   (是否安装单元测试,我选择安装)
Setup e2e tests with Nightwatch(Y/n)?    (是否安装e2e测试 ,我选择安装)
到这里,构建完成,关于使用vue-cli搭建项目的信息,可以参考://www.jianshu.com/p/2769efeaa10a,作者:玄木
4、安装node_modules以及运行项目
分别执行以下命令:
cd vuetest
npm install
npm run dev
第一行命令是进到新建的vuetest目录里面,第二行npm install 会在当前目录下新建一个node_modules目录并且安装所有依赖工具包。由于工具包较多,所以会花费很长一段时间。第三句是运行该项目在本地服务器,可以通过浏览器访问,默认地址为:“//localhost:8080”
  如果最后一步出错,可以尝试以下方法:
  第一种:端口8080被占用,打开项目的"config\index.js"文件修改port: 8080为其他端口
  第二种:电脑找不到默认浏览器,尝试更换默认浏览器为其他浏览器
如果成功的话会在浏览器看到如下结果:
   

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注WEB前端Node.js频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程