安装Node,创建vue项目,运行及打包
1、安装node js
下载地址:http://nodejs.cn/download/
2、安装完成后运行Node.js command prompt(node -v查看安装版本)

3、安装npm(由于现在版本的nodejs已经集成npm所以无需安装,可以用npm -v 查看版本)
4、注册cnpm来代替npm
使用命令:npm install cnpm -g --registry=https://registry.npm.taobao.org
如果你发现你安装成功了,使用cnpm却发现找不到命令,那么就是你的环境变量有问题,在环境变量里面的path添加你node的安装路径就行,比如";C:\Program Files\nodejs\node_modules"
5、安装vue脚手架vue-cli
命令:cnpm install -g vue-cli
安装成功后可以用 vue -V 查看vue版本
6、cd到对应的目录下初始化vue项目
命令:vue init webpack my-project
Project name 项目名
Project description 项目名描述
Author 作者邮箱
Use ESLint to lint your code? 是否需要ESlist语法检查
Setup unit tests with Karma + Mocha? 是否需要单元测试
Setup e2e tests with Nightwatch? Yes是否需要e2e测试
7、package.json为项目依赖资源,如果要运行这个项目需要使用cnpm install 安装依赖项(直接在项目文件夹路径下执行)
8、使用命令cnpm run dev启动项目,浏览器会打开 http://localhost:8080/#/ 看到以下效果

开发时属于热部署状态,代码保存后浏览器会自动刷新,错误提示也非常友好。

9、编译打包 cnpm run build
会编译打包到项目dist文件夹下,然后我们就可以部署到服务器上(注意:如果你直接打开index.html,可能页面会是一片空白,这是由于你引用的js路径有问题)
安装Node,创建vue项目,运行及打包的更多相关文章
- vue — 安装并创建vue项目
1.先从node.js官网(https://nodejs.org/en/download/) 下载并安装node,然后通过在命令行输入node -v命令,查看node的版本,要是出现相应的版本号就证明 ...
- node 安装 vue-cli 创建vue项目
$ npm install -g vue-cli $ vue init webpack-simple my-project $ cd my-project $ npm install $ npm ru ...
- Vue-cli安装,创建Vue项目
1.安装脚手架: npm install -g vue-cli 2.查看vue: vue 3.查看可以使用的模板: vue list 4.创建项目sell: vue init webpack sell ...
- Vue项目运行或打包时,频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
前端使用基于vue的Nuxt框架,但是随着项目功能增多,项目变大,频繁出现此种情况,原因是项目太大,导致内存溢出,排除代码问题外,可参照以下方式解决 解决方案 1.全局安装increase-memor ...
- (原)Vue 单文件组件安装 (创建vue-cli 项目)
更新于20200220 题外话:久违了我的博客园 正题: 1.准备工作,安装环境 1.安装node 官网下载安装即可 -- 配置环境变量 2.安装npm (基于node.js 包管理器) 3.安装c ...
- 安装配置nodejs并创建Vue项目
一.下载安装node.js 1.Node.js 官方网站下载:https://nodejs.org/en/ 2.傻瓜式安装 双加安装包,除了根据自己的需要选择安装位置外,都默认下一步. 3.验证安装 ...
- 使用cnpm创建vue项目(含离线安装)
# 全局安装淘宝cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org #升级 npm cnpm install npm ...
- 使用vue-cli脚手架创建vue项目
使用vue-cli脚手架创建vue项目 首先,你已经安装了node. 使用vue-cli@2 创建项目 执行 命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...
- vue初级学习--控制台创建vue项目
一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...
随机推荐
- redis锁操作
模拟多线程触发 package com.ws.controller; import io.swagger.annotations.Api; import io.swagger.annotations. ...
- core的 Linq基本使用,简单模拟数据库多表的左右内连接的测试
1:先看效果: 2:部分代码截图 3:全部代码 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 n ...
- linux账户的锁定和解锁、禁用账号
l——lock锁定 S——STATUS查看 u——unlock解锁 1.通过passwd命令锁定和解锁: [root@localhost ~]# passwd -S abc ——passwd -S ...
- [LeetCode]面试题53 - I. 在排序数组中查找数字 I(二分);面试题53 - II. 0~n-1中缺失的数字(二分)
##面试题53 - I. 在排序数组中查找数字 I ###题目 统计一个数字在排序数组中出现的次数. 示例 1: 输入: nums = [5,7,7,8,8,10], target = 8 输出: 2 ...
- 用华为HMS ML kit人体骨骼识别技术,Android快速实现人体姿势动作抓拍
你有没有过这种体验,拍照时对着镜头,脑子一片空白.表情僵硬.手和脚无处安放,最后拍出来的照片很是奇怪.拍照软件中的固定姿势抓拍功能可以帮助你:选择一个你想要的姿势模板,当你摆出同款姿势时,软件会进 ...
- java虚拟机5 字节码
java字节码本质是java程序的格式化表示,便于机器处理.所以他是java程序的另一种表示,java程序包含的信息他都包含并且更加结构化. java虚拟机字节码格式: magic 魔数,标识该文件是 ...
- OOD 面向对象面试干货分享| 面向对象设计的SOLID原则
S.O.L.I.D是面向对象设计和编程(OOD&OOP)中几个重要编码原则(Programming Priciple)的首字母缩写. 简写 全拼 中文翻译 SRP The Single Res ...
- 立下flag!
从今日(2020年6月29日)开始,直到两个月的暑假结束2020年8月31日,每天vp一场div3,至少要ac4道题目.
- session安全&&CBC字符反转攻击&&hash拓展攻击
session安全 p神写的: 在传统PHP开发中,$_SESSION变量的内容默认会被保存在服务端的一个文件中,通过一个叫"PHPSESSID"的Cookie来区分用户.这类se ...
- Ubuntu16.04 Nvidia显卡驱动简明安装指南
简单得整理了一下Ubuntu16.04 Nvidia显卡驱动的安装步骤: 查看当前系统显卡参数: sudo lspci | grep -i nvidia 删除之前的驱动: sudo apt-get - ...