很早以前就开始看vue2.0和webpack,但总是留不下深刻的印象,一直缺少一个可以贯通的项目,而且工作也没有时间,最近辞职在家,从网上找了个项目,写了大概八天,踩了无数的坑啊!!

下载的项目包括,设计图,源码什么的都有,只不过是它基于vue1.0构建的,我用vue2.0从头写了一遍

先写下项目流程

1.vue-cli脚手架创建项目目录(具体可见官网:https://github.com/vuejs/vue-cli

npm install vue-cli -g

初始化项目依赖:(选择webpack来构建打包项目)

vue init <template-name> <project-name>
vue init webpack my-project

上面那几个相应的选择下,ESLint是规范代码,我关了,因为开了之后很蛋疼,一直报错,喜欢的可以开下,感受一下,下面两个是用来单元测试的,不用开;

此时你的根目录下应该会有自多搭建的相应的目录

打开根目录下的 package.json 文件,里面是本次项目所需要的依赖,就是各种压缩,解析,路径等等的东西;所以我们要在命令行中运行

npm install

来安装这些npm依赖包;安装完成后项目会多出一个叫 node_modules 的文件夹

webpack具体的配置,都在bulid和 config里面,里面的属性我还没有全部弄明白,有时间定会去深究;

webpack+vue2.0项目 (一) vue-cli脚手架的更多相关文章

  1. webpack vue2.0项目脚手架生成的webpack文件

    var path = require('path') var utils = require('./utils') var config = require('../config') var vueL ...

  2. webpack+vue2.0项目 (二)热加载,vue-router

    目录创建好之后,命令行输入 npm run dev 因为在配置文件config/index.js里: dev: { env: require('./dev.env'), port: 8080, aut ...

  3. webpack vue2.0项目配置文件详解

    const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('h ...

  4. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  5. Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别

    这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...

  6. 从零开始搭建Vue2.0项目(一)之快速开始

    从零开始搭建Vue2.0项目(一)之项目快速开始 前言 该样板适用于大型,严肃的项目,并假定您对Webpack和有所了解vue-loader.确保还阅读vue-loader的文档,了解常见的工作流程配 ...

  7. Webpack+vue2.0如何注册全局组件 (01)

    Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...

  8. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  9. vue2.0 项目搭建 和vue 2.0 electron 项目搭建

    1.关于electron vue 项目的搭建 全局或者局部安装项目vue: 脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electro ...

随机推荐

  1. Linux内核驱动学习(十)Input子系统详解

    文章目录 前言 框架 如何实现`input device` 设备驱动? 头文件 注册input_dev设备 上报按键值 dev->open()和dev->close() 其他事件类型,处理 ...

  2. PDF怎么转换成Word,免费,完整的那种

      简介 PDF可以分为文字型PDF和图片型PDF,文字型PDF即可以选中文字内容的PDF,反之图片型PDF即无法选中文字的PDF,其内容实际上是图片. 本文针对不同类型,介绍PDF转Word方法,可 ...

  3. nginx源码安装方法

    nginx源码安装方法 安装方法如下 1.安装nginx必要的源码依赖软件包. yum -y install gcc gcc-c++ automake pcre pcre-devel zlib zli ...

  4. 类型信息(反射,RTTI)

    类型信息 1.java如何在运行时识别对象和类的信息 "传统的"RTTI run-time type identification ,假设我们在编译时已经知道了所有类型,在编译的时 ...

  5. 基于Memcached的Nginx服务器集群session共享

    原料:jdk1.8,tomcat7,nginx1.16,memcached-1.2.6,Mem-Tomcat需要的jar包,基于windows7.所有的点击以下链接可下载 链接:https://pan ...

  6. JS的IIFE

    1. 定义 IIFE: Immediately Invoked Function Expression,意为立即调用的函数表达式,也就是说,声明函数的同时立即调用这个函数. 首先我们要了解一般情况下什 ...

  7. 线上Kafka突发rebalance异常,如何快速解决?

    文章首发于[陈树义的博客],点击跳转到原文<线上Kafka突发rebalance异常,如何快速解决?> Kafka 是我们最常用的消息队列,它那几万.甚至几十万的处理速度让我们为之欣喜若狂 ...

  8. React:Element

    React Elements 是构成React App的最小单位.React中的组件是由一个或多个Elements构成的. 和DOM不同,React Elements 是纯粹的JS对象.利用React ...

  9. 5.8 Go 单元测试

    5.8 Go 单元测试 如果你不想后半生的美好时光都在寻找BUG中度过,那么必须写些程序用来检测产品代码的结果和预期的一样. Go语言的测试依赖于go test测试命令和一组按约定方式编写的测试函数, ...

  10. js得到文件后缀

    js得到文件后缀  http://www.cnblogs.com/lan0725/archive/2010/05/25/1873745.html function getFileExt(str) {  ...