vue+webpack搭建基础项目（非vue-cli）

  1. yarn add vue
  2. yarn add webpack
  3. yarn add webpack-cli
  4. yarn add html-webpack-plugin
  5. yarn add webpack-dev-server
  6. 创建build、src文件夹
  7. 创建index.html文件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
  8. 创建src/index.js文件

    import Vue from ‘vue‘
new Vue({
  el:‘#app‘,
  render(h){
    return h(‘div‘,‘hello world！‘)
  }
})
  9. 创建build/webpack.dev.conf.js文件

    const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
module.exports = {
  entry: ‘./src/index‘,
  output: {
    filename:‘./dist/main.js‘
  },
  plugins:[new HtmlWebpackPlugin({
    filename:‘index.html‘,
    template:‘./src/index.html‘,
    inject:true //true夹在在文件尾部
  })],
  devServer: {
    port:1222,
    open:true//自动打开浏览器
  }
}
  10. 在package.json中添加scripts
  11. yarn start 启动项目

gitHub

.github a { text-decoration: none; color: #3787ff; line-height: 20px }
.github { margin-left: 20px }
ol { padding-left: 15px !important }

原文地址：https://www.cnblogs.com/hanxiaoer/p/9550210.html

时间： 2024-11-03 21:19:23

vue+webpack搭建基础项目（非vue-cli）的相关文章

使用webpack搭建react项目 webpack-react-project

webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.config.js 首先创建一个项目文件夹,并进入到该文件夹: mkdir react-webpack-project 初始化项目:npm init 根据提示创建package.json 通过NPM安装webpack和webpack-cli,其中-D相当于--save-dev: npm install we

vue+webpack+vue-cli+WebStrom 项目搭建

作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.安装 webpack 和vue-cli 模块: npm install webpack -g npm install vue-cli -g 2.进入到新建项目的目录里面执行以下命令新建项目: vue init webpack hiibook_find 3.然后进入到使用cd 命令进入到新建的hiibook_find目录下面安装package.json中的模块: cnpm install 4.然后执行命令看是

VUE+ElementUI 搭建后台项目（一）

前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做:看过一个不错的后台配置模板(vue-element-admin),页面也挺美的,但是还是碍于不想看太多关于这个模板的配置说明,于是又拉出来之前我搭建的简易版的模板,决定重构下,使用自己搭建的后台系统模板,配置非常简单:本文将从初始化项目开始一直到打包上线做一个详细的介绍,看完本文章,绝对会对其中的一

Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期

目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. vue文件 5.App.vue 4.Vue生命周期(重点!!!!!!!!!) main.js render渲染函数 补充: 总结: 1. vue环境搭建 """ 类似于 vue -- Django node -- python npm -- pip ""&q

Vue.js搭建官方项目的步骤

搭建官方项目模板步骤:  1.npm install  vue-cli (安装vue-cli )  有的时候有看到其它两种写法:  --save-dev 和 --save的写法.这两个有一定的区别,我们都知道package.json  中有一个 "dependencies" 和 "devDependencies" 的.dependencies 是用在开发完上线模式的,就是有些东西你上线以后还需要依赖的,比如juqery , 我们这里的vue 和 babel-runt

适合初学者学习的的vue+webpack的小项目

勾三股四的vue+webpack实战:http://jiongks.name/blog/just... 用Vue构建一个Notes App:https://coligo.io/learn-vuex-... Notes App中文版:https://segmentfault.com/a/11... Vue60分钟系列:http://www.cnblogs.com/keepfo... Vue2.0官方demo源码解读:http://www.jianshu.com/p/2fc8... webpack配

Vue+webpack构建一个项目

1.安装CLI命令的工具  推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack myapp vue -v 可以查看版本号(V大写)----------------------------构建项目信息详解 - Project name:项目名 - Project description: 项目描述 - Author: 作者 - Vue build: - 第一种:配合大部分的开发人员

Vue环境搭建和项目初始化（windows）

1.    安装node.js 官网下载安装:https://nodejs.org/en/ 版本查看:node -v 注意:node版本最好新一点好,推荐6.0以上. 2.    npm安装webpack a)     命令 npm install -g webpack //全局安装 npm install -g webpack-dev-server //安装调试工具 b)     Webpack安装权限问题 如果出现上图所示错误说明用户权限受限,使用管理员权限打开命令提示符(或node.js

vue开发搭建（npm安装 + vue脚手架安装）

一.概念 1.npm:  Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue-cli:   用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装) 原文:https://www.cnblogs.com/goldlong/p/8027997.html (部分步骤有些修改) 参考文:htt