详解使用nodeJs安装Vue-cli


Posted in NodeJs onMay 17, 2017

前提:nodeJs本地已安装。

1、执行npm install --global vue-cli ,全局安装vue-cli

----因为默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器。

产生通过config命令设置默认下载路径:

npm config set registry https://registry.npm.taobao.org

然后再执行:

npm install --global vue-cli

2、安装后,检查是否安装成功

vue -V (在此注意V为大写)

3、使用vue建一个项目名叫“my-project”(vue init webpack my-project),注意项目名不能有大写。

----注:vue-cli 的模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,他的配置并不全放在根目录下的 webpack.config.js 中。

----webpack-simple 相对简单的,它根目录下才有个 webpack.config.js。

详解使用nodeJs安装Vue-cli

4、注意:

项目建立过程中,有如下选择,选择NO。(该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,避免不必要的麻烦)。

后两项为单元测试,可以选择No.

详解使用nodeJs安装Vue-cli

5、项目建立完成后,目录结构如下:

详解使用nodeJs安装Vue-cli

6、安装项目所需依赖,进入项目中:

npm install

完成后,会发现项目目录下多出一个node_modules文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。

详解使用nodeJs安装Vue-cli

7、进入项目目录文件夹(my-project)中,就可以使用vue进行开发啦

8、使用npm run dev,便可以打开本地服务器实时查看效果(localhost:8080)

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js

详解使用nodeJs安装Vue-cli

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

9、初始效果

详解使用nodeJs安装Vue-cli

10,退出监听,可以直接Ctrl+C,选择Y。

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

NodeJs 相关文章推荐
NodeJS框架Express的模板视图机制分析
Jul 19 NodeJs
nodejs中简单实现Javascript Promise机制的实例
Dec 06 NodeJs
Nodejs为什么选择javascript为载体语言
Jan 13 NodeJs
NodeJS使用jQuery选择器操作DOM
Feb 13 NodeJs
nodejs入门教程四:URL相关模块用法分析
Apr 24 NodeJs
Nodejs进阶:express+session实现简易登录身份认证
Apr 24 NodeJs
nodeJS实现路由功能实例代码
Jun 08 NodeJs
Nodejs调用WebService的示例代码
Sep 29 NodeJs
NodeJs 文件系统操作模块fs使用方法详解
Nov 26 NodeJs
NodeJS 文件夹拷贝以及删除功能
Sep 03 NodeJs
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
Feb 06 NodeJs
nodejs实现百度舆情接口应用示例
Feb 07 NodeJs
NodeJS创建最简单的HTTP服务器
May 15 #NodeJs
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
May 13 #NodeJs
配置nodejs环境的方法
May 13 #NodeJs
nodejs multer实现文件上传与下载
May 10 #NodeJs
nodejs处理图片的中间件node-images详解
May 08 #NodeJs
使用nodejs爬取前程无忧前端技能排行
May 06 #NodeJs
win系统下nodejs环境安装配置
May 04 #NodeJs
You might like
adodb与adodb_lite之比较
2006/12/31 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php 团购折扣计算公式
2011/11/24 PHP
php下Memcached入门实例解析
2015/01/05 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python常规方法实现数组的全排列
2015/03/17 Python
Python进阶篇之字典操作总结
2016/11/16 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Django中的文件的上传的几种方式
2018/07/23 Python
python实现狄克斯特拉算法
2019/01/17 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python安装scipy的方法步骤
2019/06/26 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
给幼儿园老师的表扬信
2014/01/19 职场文书
中青班党性分析材料
2014/02/16 职场文书
大学生党员承诺书
2014/05/20 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
MySQL分库分表详情
2021/09/25 MySQL