详解使用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实现黑名单中间件设计
Jun 17 NodeJs
Nodejs sublime text 3安装与配置
Jun 19 NodeJs
nodejs的10个性能优化技巧
Jul 15 NodeJs
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
Dec 30 NodeJs
async/await与promise(nodejs中的异步操作问题)
Mar 03 NodeJs
详解nodejs微信公众号开发——3.封装消息响应模块
Apr 10 NodeJs
NodeJs中express框架的send()方法简介
Jun 20 NodeJs
详解从NodeJS搭建中间层再谈前后端分离
Nov 13 NodeJs
Nodejs让异步变成同步的方法
Mar 02 NodeJs
详解nodejs http请求相关总结
Mar 31 NodeJs
nodejs脚本centos开机启动实操方法
Mar 04 NodeJs
nodejs处理tcp连接的核心流程
Feb 26 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
php 设计模式之 单例模式
2008/12/19 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
javascript的内存管理详解
2013/08/07 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
django的登录注册系统的示例代码
2018/05/14 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
python中退出多层循环的方法
2018/11/27 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Python如何操作docker redis过程解析
2020/08/10 Python
python Tornado框架的使用示例
2020/10/19 Python
Django多数据库联用实现方法解析
2020/11/12 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
什么样的创业计划书可行性高?
2014/02/01 职场文书
青春励志演讲稿
2014/04/29 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
团员个人总结
2015/02/26 职场文书
教师读书活动心得体会
2016/01/14 职场文书