详解使用nodeJs安装Vue-cli
前提: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。
4、注意:
项目建立过程中,有如下选择,选择NO。(该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,避免不必要的麻烦)。
后两项为单元测试,可以选择No.
5、项目建立完成后,目录结构如下:
6、安装项目所需依赖,进入项目中:
npm install
完成后,会发现项目目录下多出一个node_modules文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。
7、进入项目目录文件夹(my-project)中,就可以使用vue进行开发啦
8、使用npm run dev,便可以打开本地服务器实时查看效果(localhost:8080)
如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js
建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。
9、初始效果
10,退出监听,可以直接Ctrl+C,选择Y。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 王磊:AI 时代物流行业的 OCR 应用
- 张兴华:云端架构助力企业快速成长
- 腾讯云GAME-TECH沙龙干货回顾:腾讯游戏云全球化实践
- 基于内容关键性的高效 FEC 抗网络丢包算法
- 腾讯云GAME-TECH沙龙干货回顾:三七互娱游戏全球化运营心得分享
- 《实现模式》读书总结
- 腾讯云 GAME-TECH 沙龙干货回顾:Eyougame 海外发行实践分享
- 腾讯 AI Lab 副主任俞栋:过去两年基于深度学习的声学模型进展
- 白辉(七公):电商转型难题,看云如何破题
- 《Node.js在CLI下的工程化体系实践》成都OSC源创会分享总结
- 5分钟教你玩转 sklearn 机器学习(上)
- WebSocket系列之socket.io
- Python 数据分析学习笔记
- ERP管理软件系统设计方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 5秒解决:VMware Workstation 与 Hyper-V 不兼容
- Java的访问控制符详解(结合代码演示)
- Python贪吃蛇小游戏_完整源码免费分享
- GitHub修改昵称和用户名(图解详细教程)
- Python飞机大战小游戏_完整源码免费分享
- Linux求助命令
- Linux关机命令及步骤
- Java实现二叉树层次遍历:从上往下打印出二叉树的每个节点,同层节点从左至右打印。
- Django 用户认证系统使用总结
- 前端综合面试题(9道)
- 用SQL查询Oracle数据库名和实例名
- Hadoop历史服务器配置详细步骤
- MySQL常见关键字优先级
- Linux进程管理命令及状态详解
- sqoop把hive数据导入mysql出现中文乱码