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项目,运行及打包的更多相关文章

  1. vue — 安装并创建vue项目

    1.先从node.js官网(https://nodejs.org/en/download/) 下载并安装node,然后通过在命令行输入node -v命令,查看node的版本,要是出现相应的版本号就证明 ...

  2. node 安装 vue-cli 创建vue项目

    $ npm install -g vue-cli $ vue init webpack-simple my-project $ cd my-project $ npm install $ npm ru ...

  3. Vue-cli安装,创建Vue项目

    1.安装脚手架: npm install -g vue-cli 2.查看vue: vue 3.查看可以使用的模板: vue list 4.创建项目sell: vue init webpack sell ...

  4. Vue项目运行或打包时,频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

    前端使用基于vue的Nuxt框架,但是随着项目功能增多,项目变大,频繁出现此种情况,原因是项目太大,导致内存溢出,排除代码问题外,可参照以下方式解决 解决方案 1.全局安装increase-memor ...

  5. (原)Vue 单文件组件安装 (创建vue-cli 项目)

    更新于20200220 题外话:久违了我的博客园 正题: 1.准备工作,安装环境 1.安装node 官网下载安装即可  -- 配置环境变量 2.安装npm (基于node.js 包管理器) 3.安装c ...

  6. 安装配置nodejs并创建Vue项目

    一.下载安装node.js 1.Node.js 官方网站下载:https://nodejs.org/en/ 2.傻瓜式安装 双加安装包,除了根据自己的需要选择安装位置外,都默认下一步. 3.验证安装 ...

  7. 使用cnpm创建vue项目(含离线安装)

    # 全局安装淘宝cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org #升级 npm cnpm install npm ...

  8. 使用vue-cli脚手架创建vue项目

    使用vue-cli脚手架创建vue项目 首先,你已经安装了node. 使用vue-cli@2 创建项目 执行 命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...

  9. vue初级学习--控制台创建vue项目

    一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...

随机推荐

  1. ZK集群源码解读

    1.1. 集群模式 1.1.1.   数据同步总流程 1.1.1.1. OBSERVING 1.1.1.2. FOLLOWING 1.1.1.3. LEADING 1.1.2. 领导选举 1.1.2. ...

  2. leetcode刷题-53最大子序和

    题目 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 思路 动态规划:求整个数组的连续子数组的最大和,可以求出每个位置的连续子数组的最大和,返回 ...

  3. TP6.0多应用模式隐藏路由中的应用名

    本文默认采用的是多应用模式 PHP技术群: 159789818 ThinkPHP技术群: 828567087 1. 多应用模式中隐藏路由中的应用名的三种方式 域名绑定应用 增加应用入口 入口文件绑定应 ...

  4. 给编程小白的java JDK安装教程

    对刚开始学习编程的新手朋友们来说,安装开发环境可谓是一件头疼的事了,为了不让刚准备入门java的朋友还没写出自己的Hello World就被安装开发环境劝退,所以本篇文章诞生了. 下载JDK 打开浏览 ...

  5. 我是如何使用freemarker生成Word文件的?

    推荐:亲身体验,数次踩坑,遂撰写此文,以备各位不时之需. 背景 一天,产品经理递给我了一份word报告,我定睛一看 这个文档有大大小小的标题层级,还有排版好的段落.各种一目了然的饼图.走势图,当然还少 ...

  6. 关于Java的编译执行与解释执行

    编程语言分为低级语言和高级语言,机器语言.汇编语言是低级语言,C.C++.java.python等是高级语言. 机器语言是最底层的语言,能够直接执行.而我们编写的源代码是人类语言, 计算机只能识别某些 ...

  7. Python反转链表

    # -*- coding:utf-8 -*- # class ListNode: # def __init__(self, x): # self.val = x # self.next = None ...

  8. 云计算openstack共享组件——时间同步服务ntp(2)

    一.标准时间讲解 地球分为东西十二个区域,共计 24 个时区 格林威治作为全球标准时间即 (GMT 时间 ),东时区以格林威治时区进行加,而西时区则为减. 地球的轨道并非正圆,在加上自转速度逐年递减, ...

  9. python爬取花木兰豆瓣影评,并进行词云分析

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资 ...

  10. 如何下载jmeter旧版本

    推荐先用旧版本做好测试基本操作,因为高版本不适合做压力测试,需要证书,有点麻烦. 1.百度或直接打开jmeter官网:https://jmeter.apache.org/ 2.向下拖到Archives ...