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. 第二周 数据分析之展示 Matplotlib基础绘图函数实例

    Pyplot基础图表函数 Pyplot饼图的绘制: Pyplot直方图的绘制: Pyplot极坐标图的绘制: Pyplot散点图的绘制: 单元小结: import numpy as np import ...

  2. Groovy闭包

    定义 闭包(Closure)是一种数据类型,它代表一段可执行的代码.它可以作为方法的参数,或者返回值,也可以独立运行,定义如下: def xxx = {parameters -> code}   ...

  3. (转)Vue种key的作用

    https://blog.csdn.net/qq_41861679/article/details/80659278 https://cn.vuejs.org/v2/api/#key 其实不只是vue ...

  4. pl/sql学习(6): 引号/程序调试/列中的字符串合并/正则表达式

    有关自治事务的问题: https://www.cnblogs.com/princessd8251/p/4132649.html 我在plsql development学习中遇到的常见问题: (一) 引 ...

  5. cf55D 数位dp记忆化搜索+状态离散

    /* 漂亮数定义:可以整除任意数位上的数 求出区间[l,r]之间的漂亮数个数 因为 dp[i][j][k]:i位前模lcm的值是j,i位前lcm是k的漂亮数个数 */ #include<bits ...

  6. Java Spring Boot VS .NetCore (九) Spring Security vs .NetCore Security

    Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...

  7. 在react-native项目中使用iconfont自定义图标库(android)

    1. 安装react-native-vector-icons yarn add react-native-vector-icons react-native link 如果没有关联成功的话,可以参考官 ...

  8. spark DataFrame

    DataFrame的推出,让Spark具备了处理大规模结构化数据的能力,不仅比原有的RDD转化方式更加简单易用,而且获得了更高的计算性能.Spark能够轻松实现从MySQL到DataFrame的转化, ...

  9. 【mybatis】-- springboot整合mybatis

    1.添加依赖 <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>m ...

  10. BZOJ-9-3295: [Cqoi2011]动态逆序对

    题意:N个数的排列,M次操作,每次求当前的逆序对数量并删掉一个数 思路 :动态说的很到位.hiahia ... 最初一直没想明白为什么 大佬的cdq 中统计了两次. 先定义 给出的删除的点的 t 值依 ...