很早以前就开始看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. ubuntu18.04下mysql安装时没有出现密码提示

    前言: 一:配置 ubuntu 18.04 mysql 5.7.30 二:问题 ubuntu18.04下mysql安装时没有出现密码提示,安装后自己有一个默认的用户名以及密码 解决方案: 1. 在终端 ...

  2. Qt线程池

    说明 Qt中可以有多种使用线程的方式: 继承 QThread,重写 run() 接口: 使用 moveToThread() 方法将 QObject 子类移至线程中,内部的所有使用信号槽的槽函数均在线程 ...

  3. C# 判断文件格式的一些总结

    前提概述: 项目中 经常会有上传图片的地方  有的时候需要对图片类型做一些要求   这个时候就需要一些判断   虽然前段上传的时候可以去做类型的限制  或者后台接受的时候从file的type 中获取图 ...

  4. Mysql常用sql语句(九)- like 模糊查询

    测试必备的Mysql常用sql语句,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1683347.html 前言 ...

  5. 一、Spring的控制反转(IOC)学习

    一.控制反转 1.什么是控制反转? 控制反转(Inversion of Control,缩写为IoC),是面向对象中的一种设计原则,可以用来减低计算机代码之间的耦合度.其中最常见的方式叫做依赖注入(D ...

  6. 存储过程——异常捕获&打印异常信息

    目录 0. 背景说明 1. 建立异常信息表ErrorLog 2. 建立保存异常信息的存储过程 3. 建立在SQL Server中打印异常信息的存储过程 4. 建立一个用于测试的存储过程抛出异常进行测试 ...

  7. HBuilderX 打包 uniapp 项目 图片路径不显示(不正确)

    打包h5项目本地服务运行正常 部署后页面显示空白 在根目录manifest.json中配置h5下的publicPath即可 "h5" : { "template" ...

  8. [hdu5399 Too Simple]YY

    题意:m个{1,2...n}→{1,2...,n}的函数,有些已知有些未知,求对任意i∈{1,2,...,n},f1(f2(...(fm(i)))=i的方案总数,为了方便简记为F(i) 思路:如果存在 ...

  9. JVM 调优测试 之 故意分配小的堆空间,观察gc回收打印的内容

    测试代码如下: @Test public void testPrintGcDetail(){ HashMap<String, List> gcMap = new HashMap<&g ...

  10. Redis学习笔记(七) 数据库

    Redis 服务器将所有的数据库都保存在服务器状态redisServer结构的db数组中,db数组的每个项都是一个redisDB: struct redisServer{ //一个数组保存着服务器中的 ...