随着VUE 技术的不断更新,越来越多的开发者开始使用vue编写前端界面,今天我就和大家分享一下 ,如何快速创建一个vue项目。

前提: 安装了node.js

首先: 全局安装vue-cli

使用命令:

npm intsall vue-cli -g  (-g代表全局安装)

创建项目 

使用Vue初始化基于webpack 的新项目

使用命令:

vue init webpack my-project

命令运行中会提示一些选项 ,可以根据自己使用情况安装 ,个人推荐安装eslint  ,他可以更好的规范我们的代码风格

新项目创建好后,可以开始安装基础模块

进入我们创建的项目

cd my-boject

开始安装模块

npm  intsall

此命令可能会执行很长时间,视网速而定 ,如果感觉时间很长,可以考虑试试cnpm 安装

模块安装完成后,执行以下命令可预览刚刚创建的新项目

npm run dev

至此 使用Vue-cli脚手架创建新项目完成

快速创建vue 项目的更多相关文章

  1. 快速创建 Vue 项目

    转载:https://www.jianshu.com/p/c7df292915e7 为了便于 Vue 项目的管理, Vue 团队官方开发了 vue-cli 工具. 本文将带您使用 vue-cli 快速 ...

  2. 使用vue脚手架快速创建vue项目(入门)

    1.安装环境 为了方便,以下操作大多数中命令行中运行,window可以用cmd,powershell,gitbash等. 安装node.js 打开它的官网,或者中文网站,然后直接下载就可以了,然后跟安 ...

  3. 使用vue-cli创建vue项目

    vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...

  4. 快速搭建Vue项目

    快速搭建Vue项目 第一次安装vue项目Vue推荐开发环境Node.js 6.2.0.npm 3.8.9.webpack 1.13.vue-cli 2.5.1.webstrom2016 安装环境: 安 ...

  5. 抛弃vue-webpack-template,踩坑Vue-Cli创建vue项目

    官方指导网站https://cli.vuejs.org/ 一.全局安装@vue/cli //本人包管理工具使用yarn yarn global add @vue/cli 安装完成 二.创建vue项目 ...

  6. 基于3.X版本的脚手架创建VUE项目

    一.基于交互式命令行的方式,创建vue项目 1.命令:vue create 项目名称.项目名称必须是英文的.不要包含中文.特殊的字符和符号.在cmd中输入命令:vue create vue_proje ...

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

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

  8. Vue2+Webpack创建vue项目

    相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...

  9. 通过脚手架创建Vue项目

    第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vu ...

随机推荐

  1. pikaqiu练习平台(XSS(跨站脚本))

    XSS(跨站脚本)概述 Cross-Site Scripting 简称为“CSS”,为避免与前端叠成样式表的缩写"CSS"冲突,故又称XSS.一般XSS可以分为如下几种常见类型: ...

  2. 安装apache ActiveMQ

    笔者环境 操作系统centos 6.9 java jdk 1.8 activemq版本 5.15.9 a)安装activemq需要jdk 环境,这里使用的是 jdk 1.8 yum安装jdk比较简单, ...

  3. MySQL 的两种存储引擎

    MyISAM 是MySQL的默认数据库引擎(5.5以后默认是InnoDB)性能极佳,但不支持事务处理. InnoDB 是MySQL的数据库常用的数据引擎. MyISAM 和 InnoDB 两者之间有明 ...

  4. 对C#面向对象三大特性的一点总结

    一.三大特性 封装: 把客观事物封装成类,并把类内部的实现隐藏,以保证数据的完整性 继承:通过继承可以复用父类的代码 多态:允许将子对象赋值给父对象的一种能力 二.[封装]特性 把类内部的数据隐藏,不 ...

  5. 【外文阅读】Web Development in 2020: What Coding Tools You Should Learn---Quincy Larson

    原文链接:https://mail.qq.com/cgi-bin/readtemplate?t=safety&check=false&gourl=https%3A%2F%2Fwww.f ...

  6. HTTP状态码详解(上)

    HTTP状态码的英文为 HTTP Status Code.下面是常见的HTTP状态码: 200 - 请求成功 301 - 资源(网页等)被永久转移到其它URL 404 - 请求的资源(网页等)不存在 ...

  7. The Reason Why Cosmetic Airless Bottles Are Widely Used

    The contents of the Cosmetic Airless Bottles    can be isolated from the air, to prevent the product ...

  8. 【代码总结】Struts2 拦截器的处理机制

    一.什么是拦截器 拦截器是一个类,可以在Action被调用之前和之后执行代码,通常框架的很多功能都是拦截器实现的,如接收输入的参数.数据验证.文件上传等 二.工作方式 做一些Action执行前的预处理 ...

  9. 多种方式实现平均分栏布局(有间距)div平分行宽

    以下例子基于分四栏+栏间有间距的例子分析 效果图:  html代码: <div class="buy-one-buy"> <h3>淘一淘</h3> ...

  10. 序列化--IOSerialize

    序列化与反序列化 序列化:将对象转换为二进制 反序列化:将二进制转换为对象 作用:传输数据:状态保持(例如应用程序记忆上次关闭时的状态) 注:被序列化对象的类的所有成员也必须被标记为可序列化特性.该类 ...