一、需要安装和配置 Node.js 与 npm

二、Vue.js的安装或cdn引用:

  ·cdn引用(不适合项目开发):

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

  ·npm安装:

    npm install vue

三、项目的创建

  1> 安装相关依赖与脚手架CLI

    · 全局安装脚手架:

      npm install -g vue-cli

      检测是否安装成功:vue -V

    · 安装 webpack 

      · 全局安装包:npm install -g webpack

      · 本地安装包:npm install -g webpack-dev-server

      检测是否安装成功:webpack -v

  2> 创建Vue项目

    1> vue init webpack "projectNmae" //projectName: 项目名称

    2> 项目选项:

      

    3> 运行项目:npm run dev,在浏览器中输入:localhost:8080进行测试,出现下图代表项目创建成功

     

    

Vue.js开发环境配置与项目创建的更多相关文章

  1. vue.js 开发环境配置

    1. node.js环境(npm包管理器) 下载: https://nodejs.org/en/download/current/ 下载解压版的方便 添加path环境后运行 npm包管理器,是集成在n ...

  2. Mac安装vue.js开发环境

    Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...

  3. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  4. Ionic2开发环境搭建、项目创建调试与Android应用的打包、优化

    Ionic2开发环境搭建.项目创建调试与Android应用的打包.优化. windows下ionic2开发环境配置步骤如下: 下载node.js环境,稳定版本:v6.9.5 下载android stu ...

  5. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  6. cocos2dx - 环境配置,项目创建

    准备工具 cocos2dx当前最新版本:v3.9       官网下载地址: http://www.cocos.com/download/ python 2.7x最新版本:2.7.11       官 ...

  7. 在win10系统环境下,安装配置sublime 3,构建python和vue.js开发环境(插件)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_131 疫情当下,最近一直在用mac下的虚拟机运行win10系统,由于在线人数过多,直播授课的时候使用vscode的时候内存暴涨,于 ...

  8. 搭建Vue.js开发环境(window10)

    我在配置Vue.js环境的时候遇到了很多的问题,希望能把这些解决方法也介绍给大家,希望能帮到大家,共同学习. 如果要转发,请注明原作者和原产地,谢谢! 注释:下面任何命令都是在windows的命令行工 ...

  9. [转]Mac下cocos2dx-3.2+Xcode环境配置和项目创建

    原文:http://blog.csdn.net/u012200908/article/details/38070885 这是有关环境配置的第二篇教程,第一篇讲的是win8下的环境配置.这里我们使用C+ ...

随机推荐

  1. 【LeetCode】516. Longest Palindromic Subsequence 最长回文子序列

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题思路 代码 刷题心得 日期 题目地址:https://le ...

  2. 【LeetCode】306. Additive Number 解题报告(Python)

    [LeetCode]306. Additive Number 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http: ...

  3. codeforce-601A. The Two Routes(最短路)

    题意: 给你N个点表示N个站,有汽车和火车,汽车只能走公路,火车只能走铁路. 然后给你M条双向路,代表这两个点之间有铁路连接. 然后告诉你如果两个点之间没有铁路,那么就是公路连接. 问你汽车和火车都到 ...

  4. 带你认识FusionInsight Flink:既能批处理,又能流处理

    摘要:本文主要介绍了FusionInsight Flink组件的基本原理.Flink任务提交的常见问题.以及最佳实践FAQ. 本文分享自华为云社区<FusionInsight HD Flink组 ...

  5. yum是什么?repo文件详解,epel简介,yum源的更换,repo和epel区别

    yum是什么?repo文件详解,epel简介,yum源的更换,repo和epel区别 简单概括: repo和epel的关系 repo是配置源的,即配置从哪里下载包(以及依赖关系)的. epel是作为桥 ...

  6. js 将数字型 的字符串 转 数字 【整数 /浮点型数字】

    1. js 提供了两种可以将 数字型 的字符串 转 数字 的方法 parseInt()和parseFloat(), parseInt() 是转成整数, 但 向下去整数 , parseFloat() 是 ...

  7. spring boot -- 配置文件application.properties 换成 application.yml

    1.前言 其实两种配置文件在spring boot 的作用一样,只是写法不同 ,yml 可以写的内容更少 ,以树结构 书写内容,看起来很清晰, 但是 如果 项目配置文件设置为 既有properties ...

  8. gradle学习(一)

    projects和tasks 任何一个Gradle构建都是由一个或者多个project组成 每个project都有多个tasks构成 每个task都代表了构建执行过程中的一个原子性操作.例如 编译 打 ...

  9. react组件性能优化PureComponent

    首先我们使用react组件会配合connect来连接store获取state,那么只要store中的state发生改变组件就会重新渲染,所以性能不高,一般我们可以使用shouldComponentUp ...

  10. centos7 配置登录前和登录信息内容

    登录之前提示信息: 登录之后提示信息: 上述中,只需修改对应的文件即可. 登录之前: vi /etc/issue 登录之后: vi /etc/motd 补充:将文件内容清空的方法,不是删除. 在前面文 ...