用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起——vue-cli.

由于是Vue+webpack这里就不赘述git那些东西,默认环境都配置好了。

第一步先建立一个文件夹我这里是apronew;

第二步在文件夹里面打开git bash,然后敲命令行npm install --global vue-cli,全局安装 vue-cli,如果已经全局安装可不用再装一次;

第三步: 第二步成功之后,创建一个基于 webpack 模板的新项目敲命令行: vue init webpack test-vue-cli

当完成第三步,进入到新init的文件夹此时是这样的

第四步:安装依赖包,用命令行npm install(这里推荐用cnpm淘宝镜像,比较快)

安装过程是这样的

安装成功是这样的

此时就可以进行最后一步跑起来啦;

第五步:npm run dev;(至于为什么是run dev 以及这个命令行敲完干了些什么日后再补上)

如果有依赖没安装上,这一步会有报错,继续安装一下响应的依赖就行了;出现以下状态就表示大功告成啦!

用Vue 脚手架构建项目结束!

Vue实战Vue-cli项目构建(Vue+webpack系列之一)的更多相关文章

  1. vue实战记录(一)- vue实现购物车功能之前提准备

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...

  2. vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  3. vue实战记录(六)- vue实现购物车功能之地址列表选配

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...

  4. vue实战记录(四)- vue实现购物车功能之过滤器的使用

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...

  5. vue实战记录(三)- vue实现购物车功能之渲染商品列表

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...

  6. vue实战记录(二)- vue实现购物车功能之创建vue实例

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...

  7. vue实战_从头开始搭建vue工程

    写在前面:vue工程入口文件分析 /index.html,/src/main.js,/src/APP.vue /index.html文件示例: <!DOCTYPE html> <ht ...

  8. @angular/cli项目构建--组件

    环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...

  9. @angular/cli项目构建--modal

    环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...

  10. @angular/cli项目构建--Dynamic.Form(2)

    form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...

随机推荐

  1. javascript原生方法实现extend

    var extend = (function () { for(var p in {toString:null}){ //检查当前浏览器是否支持forin循环去遍历出一个不可枚举的属性,比如toStr ...

  2. AngularJs 常用的过滤器

    date格式化 {{ 1304375948024 | date }}             //结果:May 3, 2011 {{ 1304375948024 | date:"MM/dd/ ...

  3. Oracle正则表达式之匹配邮箱

    利于正则表达式匹配出符合电子邮箱的数据 --1 表准备create table test_regexp( object varchar2(50)); --2 数据准备 insert into test ...

  4. JDBC事务详解

    在JDBC的数据库操作中,事务是由一个或者多个操作组成的一个不可分割的工作单元.JDBC的事务处理包含三个方面:事务的自动提交模式(Auto-commit mode).事务隔离级别(Transacti ...

  5. Linux 下按时间顺序批量删除文件

    ls -lrt| awk '{print $9}'| head -n 10 | xargs rm -rf 1.文件按时间排序: 2.获取文件名字: 3.取前10个文件 4.删除文件

  6. android调用系统相机

    Intent intent = new Intent(); intent.setPackage("com.android.camera"); intent.setAction(Me ...

  7. asp.net已流的方式下载文件

    string filePath = context.Server.MapPath("~/" + uploadFolder+"/"+file_name);//路径 ...

  8. struts2.1.6教程二、struts.xml配置及例程

    1.配置文件的优先级 在struts2中一些配置(比如常量)可以同时在struts-default.xml(只读性),strtus-plguin.xml(只读性),struts.xml,struts. ...

  9. php实现批量修改文件名称

    场景叙述:比如我要将D:\WWW\img\Gastroenterology这个文件夹下图片要重新命名成1.jpg,2.jpg.......这样的有规律名字, 如下图: 那么我们就可以利用php的ren ...

  10. 使用React改版网站后的一些感想

    文章转载:http://www.jianshu.com/p/8f74cfb146f7 网站是毕业设计的作品,开发这个网站的目的主要用于记录一些笔记,以及聚合一些资讯信息,也算自己在网络世界中的一块静地 ...