webpack+vue2.0项目 (一) vue-cli脚手架
很早以前就开始看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脚手架的更多相关文章
- webpack vue2.0项目脚手架生成的webpack文件
var path = require('path') var utils = require('./utils') var config = require('../config') var vueL ...
- webpack+vue2.0项目 (二)热加载,vue-router
目录创建好之后,命令行输入 npm run dev 因为在配置文件config/index.js里: dev: { env: require('./dev.env'), port: 8080, aut ...
- webpack vue2.0项目配置文件详解
const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('h ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别
这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...
- 从零开始搭建Vue2.0项目(一)之快速开始
从零开始搭建Vue2.0项目(一)之项目快速开始 前言 该样板适用于大型,严肃的项目,并假定您对Webpack和有所了解vue-loader.确保还阅读vue-loader的文档,了解常见的工作流程配 ...
- Webpack+vue2.0如何注册全局组件 (01)
Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- vue2.0 项目搭建 和vue 2.0 electron 项目搭建
1.关于electron vue 项目的搭建 全局或者局部安装项目vue: 脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electro ...
随机推荐
- 【Hadoop离线基础总结】MapReduce案例之自定义groupingComparator
MapReduce案例之自定义groupingComparator 求取Top 1的数据 需求 求出每一个订单中成交金额最大的一笔交易 订单id 商品id 成交金额 Order_0000005 Pdt ...
- matlab 提示 Error using mex No supported compiler or SDK was found 错误的解决办法
在使用simulink的S-Function去调用C程序的时候,需要使用mex指令预先编译C程序,但是出现 Error using mex No supported compiler or SDK w ...
- flush方法和close方法的区别
package com.yhqtv.demo05.Writer; import java.io.FileWriter; /* * @author XMKJ yhqtv.com Email:yhqtv@ ...
- CentOS7 Installing Python3
最近开始学习python. python火了这么久,我终于还是跪舔它了,我是一个跟风的人,学过C.C#.JAVA.PHP,无一例外的浅尝即止,不知道我这双已经近视的眼,确认过的眼神还对不对,希望pyt ...
- Apache Poi实现excel解析
一.说明 1.本文通过使用 poi 工具解析 excel 表格数据,实现导入导出 2.excel目前有两种格式 2003版本的 excel.xls 与 2007版本的 excel.xlsx ,注意两种 ...
- Spring Boot 教程(2) - Mybatis
Spring Boot 教程 - Mybatis 1. 什么是Mybatis? MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 J ...
- WordPress批量更换域名
UPDATE wp_options SET option_value = replace( option_value, 'http://www.old.com', 'http://www.new.co ...
- 同一父进程下的子进程之间的通信(pipe通信)
首先对于fork命令 通过fork命令创建进程 父进程返回子进程id 子进程返回0 失败返回-1 对于pipe通讯机制 pipe通讯是半双工的 也就是说只能一方读一方写 题目中想要P1的输出作为 ...
- Jmeter(三) - 从入门到精通 - 测试计划(Test Plan)的元件(详解教程)
1.简介 上一篇中宏哥已经教你如何通过JMeter来创建一个测试计划(Test Plan),那么这一篇我们就将JMeter启动起来,创建一个测试计划(Test plan),然后宏哥给大家介绍一下测试计 ...
- css变量的使用
css变量的使用 1.介绍:我们也可以在css中定义变量,和less.sass一样,通过--来定义变量 div { /* 开始定义变量 */ --color: red; /* 通过var()函数来使用 ...