1,安装node.js

vue依赖nodejs,所以首先要安装node.js

然后打开cmd,输入命令, node -v。正常出现版本号,说明你已经安装成功了

下载地址:http://nodejs.cn/download/

2,npm(cnpm)

npm是node的包管理工具

使用node之后你会接触各种各样成千上万的Package(包),就需要一个管理工具能很好的解决它的安装,更新,依赖包安装等等的维护。默认安装完node之后,npm会自动安装上的。还是cmd,输入命令 npm -V 。正常出现版本号,就可以了

由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,使用国内镜像cnpm,可以解决这个问题

npm install -g cnpm --registry=https://registry.npm.taobao.org

3,安装 vue.js

vue-cli是一种全局脚手架用于帮助搭建所需的模板框架

cnpm install -g vue-cli

npm强制清除缓存

cnpm cache clean —force

4,打开要创建的项目路径目录,创建项目

// 生成一个基于 webpack 模板的新项目   vue init webpack 项目名 或者 vue init webpack-simple 项目名

注意:vue init webpack-simple的项目默认打包后之后一个html和一个js文件,而vue init webpack项目默认打包完之后,会有很标准的目录

然后CD到项目名

//安装路由

cnpm install vue-router --save

//安装jquery

cnpm install jquery --save

// 启动开发服务器 ctrl+c 停止服务

cnpm run dev

这样,vue的项目就搭建成功了

有时起服务的时候会报错,可以补全包 cnpm install

**项目的三个目录:

文件夹1(src),主开发目录,要开发的单文件组件全部在这个目录下

文件夹2(static),静态资源目录,所有的css,js文件放在这个文件夹

文件夹3(dist),项目打包发布文件夹,最后要上线单文件项目文件都在这个文件夹中

还有node_modules目录是node的包目录,config是配置目录,build是项目打包时依赖的目录

VUE 安装&创建一个项目的更多相关文章

  1. Vue Create 创建一个新项目 命令行创建和视图创建

    Vue Create 创建一个新项目 命令行创建和视图创建 开始之前 你可以先 >>:cd desktop[将安装目录切换到桌面] >>:vue -V :Vue CLI 3.0 ...

  2. Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)

    Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...

  3. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  4. cordova安装--创建ionic项目

    1.简介ionic ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework ). 可以帮助您使用 Web 技术,比如 HTML.CS ...

  5. kraken-ejs创建一个项目【学习札记】

    Keep in Touch. 保持联络. Who’s calling? 是哪一位? You did right. 你做得对. You set me up! 你出卖我! kraken-express-e ...

  6. Ionic-wechat项目边开发边学(一):环境搭建和创建一个项目

    之前学AngularJS,教程过了一遍觉得很简单,但真正写几个Demo就错误百出,一个小小的功能要折腾很久.所以这次学Ionic,准备以开发一个项目为切入点去学,那么问题来了,开发什么项目呢? 纠结了 ...

  7. Cordova之如何用命令行创建一个项目(完整示例)

    原文:Cordova之如何用命令行创建一个项目(完整示例) 1. 创建cordova项目 (注意:当第一次创建或编译项目的时候,可能系统会自动下载一些东西,需要一些时间.) 在某个目录下创建cordo ...

  8. Gitlab创建一个项目

    1.安装git yum install git 2.生成密钥文件:使用ssh-keygen生成密钥文件.ssh/id_rsa.pub ssh-keygen 执行过程中输入密码,以及确认密码,并可设置密 ...

  9. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

随机推荐

  1. Beta 冲刺(3/7)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(3/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 整理博客 ppt模板 接下来的计划 做好机动. ...

  2. 【easy】206. Reverse Linked List 链表反转

    链表反转,一发成功~ /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; ...

  3. Qt 图像缩放显示

    1. QImage Image; Image.load(":/images/f1.png"); QPixmap pixmap = QPixmap::fromImage(Image) ...

  4. English 动词篇

    动词后加to do 和 doing的记忆口诀 一.只能用动名词(ing)作宾语 [口诀] 考虑建议盼原谅,承认推迟没得想. 避免错过继续练,否定完成停欣赏. 禁止想象才冒险,不禁介意弃逃亡. cons ...

  5. 【原创】大叔经验分享(20)spark job之间会停顿几分钟

    今天遇到一个问题,spark应用中在一个循环里执行sql,每个sql都会向一张表写入数据,比如 insert overwrite table test_table partition(dt) sele ...

  6. Java学习之Java接口回调理解

    Java接口回调 在Java学习中有个比较重要的知识点,就是今天我们要讲的接口回调.接口回调的理解如果解释起来会比较抽象,我一般喜欢用一个或几个经典的例子来帮助加深理解. 举例:老板分派给员工做事,员 ...

  7. 初学python之路-day04

    每天一篇总结,今天学习的是有关于流程控制的知识. 流程控制,顾名思义,在计算机运行中,程序是被某种控制方式按照某种流程或者规律来执行的.而python程序的运行,肯定也是按照某种规律在执行.这些规律可 ...

  8. 三十分钟学会 Less

    每一门技术的出现都是为了解决现存的问题,同样的,Less 的出现是为了解决 CSS 中过于呆板的写法.Less 官方文档 中对 Less 的使用有详细的介绍,总结一下为:Less = 变量 + 混合 ...

  9. 做GUI的随笔

    用的SDL库 官方网站是:https://littlevgl.com/   改网站需要FQ 字库制作网站: https://debugdump.com/t_771.html

  10. sass—使用自定义function和@each实现栅格布局

    /*使用自定义function和@each实现栅格布局*/ @function buildLayout($num: 5){ $map: (defaultValue: 0); //不能直接生成col,需 ...