使用vue+webpack从零搭建项目
vue到现在已经成为一个热门的框架,在项目实践当中,如果想要创建一个新项目,通常都会使用vue-cli的脚手架工具,毋容置疑能够方便很多,很多东西也不需要自己亲自去配置。都知道,脚手架其实是vue结合webpack去实现的。在这里,我就想写一篇从零创建vue结合webpack项目的文章,跟大家学习分享。
一、首先来整理个最简单的目录结构
|-index.html
|-main.js
|-App.vue
|-package.json
|-webpack.config.js
首先需要个index.html的最终打开页面,然后有一个main.js的js入口文件,还有一个vue后缀的vue文件(vue组件化开发少不了的vue后缀文件),还要一个package.json的工程文件(记录你项目名称、依赖、配置等信息的文件,这里用npm init生成),最后当然少不了的webpack配置文件。
到这里第一步完成。
二、安装webpack及webpack-dev-server
npm install webpack webpack-dev-server --save-dev(或cnpm install webpack webpack-dev-server --save-dev)
运行webpack-dev-server --inline --hot --port 8083
三、安装各种依赖。
首先是各种各样的loder和babel编译所需要的包,这里简单列举一下:
vue-loader、vue-html-loader、css-loader、vue-style-loader、babel-loader等loader和vue-hot-reload-api
babel-core、babel-plugin-transform-runtime、babel-preset-es2015、babel-runtime(具体哪个什么功能自行查找了,不是范围内……)
一次性全部安装
cnpm install vue-loader vue-html-loader css-loader vue-style-loader babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime vue-hot-reload-api --save-dev
(由于版本问题,以免带来问题,推荐使用我找的版本,也是试了好久……)
贴一下package.json
{"name": "test","version": "1.0.0","description": "","main": "main.js","scripts": {"dev": "webpack-dev-server --inline --hot --port 8083"},"author": "","license": "ISC","devDependencies": {"babel-core": "^6.17.0","babel-loader": "^6.2.5","babel-plugin-transform-runtime": "^6.15.0","babel-preset-es2015": "^6.16.0","babel-runtime": "^6.11.6","css-loader": "^0.25.0","vue-hot-reload-api": "^1.3.2","vue-html-loader": "^1.2.3","vue-loader": "^8.5.4","vue-style-loader": "^1.0.0","webpack": "^1.13.3","webpack-dev-server": "^1.16.2"},"dependencies": {"vue": "^2.6.7"} }
package.json
别忘了安装vue……
cnpm install vue --save,ok,依赖准备就绪
四、编写webpack.config.js
入口文件是main.js,输出文件bundle.js,同时配置好vue文件的loader和js的loader,代码如下
module.exports={entry:'./main.js',output:{path:__dirname,filename:'bundle.js'},resolve: {alias: {'vue': 'vue/dist/vue.js'}},module:{loaders:[{test:/\.vue$/, loader:'vue'},{test:/\.js$/, loader:'babel', exclude:/node_modules/}]},babel:{presets:['es2015'],plugins:['transform-runtime']} };
五、编写其他页面
index.html页面:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"></div><script src="bundle.js"></script> </body> </html>
main.js
import Vue from 'vue' import App from './App.vue'new Vue({el:'#app',components:{App},template: '<App/>' });
App.vue
<template><h1>{{msg}}</h1> </template> <script>export default{data(){return {msg:'welcome Vue ^_^'}}} </script> <style>body{background: #ccc} </style>
六、运行及查看
转载于:https://www.cnblogs.com/wuzhiquan/p/10434897.html
使用vue+webpack从零搭建项目相关推荐
- typeorm mysql_从零搭建项目 (10) --- 后端: 使用 TypeORM 和 MySQL
从零搭建项目 (10) --- 后端: 使用 TypeORM 和 MySQL 我的博客地址 正式地址 测试地址 前端源码 后端源码 文章目录 项目及其技术栈介绍 前端: 项目初始化 前端: 使用 Sa ...
- 你还在费力的从零搭建项目吗?
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料 作者 | 无知者云 链接 | https://www.cnblog ...
- 你还在从零搭建项目 ?
点击上方"方志朋",选择"设为星标" 做积极的人,而不是积极废人 作者 | 无知者云 链接 | https://www.cnblogs.com/davenkin ...
- electron-vue-element从零搭建项目(一)
版本信息 vue/cli 4.5.15 yarn 1.22.5 以下操作需要先安装vue/cli和yarn/npm Vue脚手架创建项目 vue create productname 本项目vue使用 ...
- electron-vue-element从零搭建项目(二)
项目目录结构 src目录下创建main文件夹,renderer文件夹 将background.js放到main文件夹下,该文件夹为主进程相关代码 其余文件全部移入到renderer文件夹下,该文件夹为 ...
- Vue基础知识总结 10:使用vue-cli(vue脚手架)快速搭建项目
- 从零构建vue+webpack (一)
写在前面: 给自己看,日常写业务有点儿繁琐,尝试着用vue+webpack 从零开始构建一个项目! 1.新建项目文件夹 运行命令 npm init (一路回车或者-y) 2.打开项目,新建src 文件 ...
- Vue第七章:项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架 回顾: 组件之间的通信 父传子:正向传递 vue允许 自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
- Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现)
Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) 目录 Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) ...
最新文章
- ERROR Worker: All masters are unresponsive! Giving up
- C#和Java在重写上的区别
- java oracle to date_用TRUNC和TO_DATE截斷oracle中的java格式化日期()
- 前端每日值得花时间看的博客
- 闲来无事,就把lnmp的php升级到php-5.2.17最新稳定版本
- [Python 网络编程] TCP、简单socket模拟ssh (一)
- 清除SQL被注入script恶意病毒代码的语句
- 情况控件Android layout_weight用法图解
- mysql限制数据类型的长度_MySQL数据类型的长度
- 定时自动关机计划命令
- 英文名大全及含义(男)
- cadence 原理图orcad使用总结
- 海康威视摄像头rtsp地址
- 蜂云软件-会员管理系统的详细功能
- HQL的执行顺序(这是重点)
- 串口——同时打开两个串口
- 怎么在短时间内快速提高网站排名
- Linux网络相关命令:netstat,ss
- xp系统什么梗_电脑分区4K对齐,对系统的影响
- 开班倒计时!12月1日—CDA数据分析就业班火热报名中
热门文章
- html淡化效果,jQuery实现基本淡入淡出效果的方法详解
- 9型转x型 cobol_兰州一餐馆推鸳鸯牛肉面 9种面型一面多吃
- mysql 关系_MySQL之关系
- Linux实验五:Linux环境下的C语言编程
- (二)深入浅出TCPIP之再识TCP,理解TCP三次握手(上)
- Github(1)-概览,初始化仓库
- 《Python Cookbook 3rd》笔记(2.11):删除字符串中不需要的字符
- TDengine安装教程
- Java多线程死锁例子
- VUE - get 、post 请求后端接口:get 、post 写法 (Axios 中文说明文档地址)