手动搭建vue项目

  1. 搭建vue前首先搭建webpack项目

　　　　首先你应当安装一下npm以及nodejs
　　　　安装完成后,进行如下操作:

// 创建项目根目录

mkdir some_project_name

// 切换到项目目录下

cd some_project_name

// 初始化该项目

npm init -y

// 下载并安装webpack相关包

npm install webpack webpack-cli webpack-dev-server --save-dev

// 手动创建相关的文件夹 --mkdir 中使用 // 或 \

mkdir src\pages src\components src\assets\js src\assets\css src\assets\imgs src\assets\fonts dist build

// 手动创建相关文件 --touch 命令中可以使用 / .

touch index.html src/assets/js/main.js build/webpack.dev.conf.js build/webpack.base.conf.js build/webpack.prod.conf.js

利用IDE编写 index.html 以及 main.js
(index.html)

<!DOCTYPE html>

<html>

    <head></head>

    <body></body>

    <script src="./src/js/bundle.js"></script>

</html>

(src/assets/js/main.js)

(function(){

    const promise = new Promise((resolve,reject) =>{

        resolve('hello webpack project')

    })

    promise.then(res =>{

        console.log(res);

    })

})();

修改package.json中scripts字段

"scripts":{

    "dev":"webpack-dev-server --inline --progress --config ./build/webpack.dev.conf.js"

}

编写./build/webpack.dev.conf.js

const path = require('path');

module.exports = {

    entry: path.resolve(__dirname,'./src/assets/js/main.js'),

    output:{

        path: path.resolve(__dirname,'./dist'),

        filename: 'js/bundle.js'

    }

}

启动项目,并打开浏览器 localhost:8080

npm run dev

控制台如果出现了 'hello webpack project' 字样,说明webpack项目已经可以使用

后续补充 热启动等优化...

手动搭建Vue之前奏:搭建webpack项目的更多相关文章

  1. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  2. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  3. vue cli 构建的 webpack 项目设置多页面

    1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...

  4. 使用 webpack 手动搭建 vue 项目

    webpack 是一个前端工程化打包工具,对于前端工程师来说 webpack 是一项十分重要的技能.下面我们就通过搭建一个 vue 项目来学习使用 webpack 主要环境: node v14.15. ...

  5. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  6. （转）windows环境vue+webpack项目搭建

    首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要 ...

  7. 用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...

  8. 从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（一）

    摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...

  9. 【原创】从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（二）

    摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...

随机推荐

  1. FastDFS文件上传和下载流程

    文件上传流程 客户端上传文件后存储服务器将文件 ID 返回给客户端,此文件 ID 用于以后访问该文件的索引信息.文件索引信息包括:组名,虚拟磁盘路径,数据两级目录,文件名.  组名:文件上传后所在的 ...

  2. Binary Heap(二叉堆) - 堆排序

    这篇的主题主要是Heapsort(堆排序),下一篇ADT数据结构随笔再谈谈 - 优先队列(堆). 首先,我们先来了解一点与堆相关的东西.堆可以实现优先队列(Priority Queue),看到队列,我 ...

  3. [ DLPytorch ] 批量归一化与残差网络

    批量归一化 通常来说,数据标准化预处理对于浅层模型就足够有效了.随着模型训练的进行,当每层中参数更新时,靠近输出层的输出较难出现剧烈变化.但对深层神经网络来说,即使输入数据已做标准化,训练中模型参数的 ...

  4. Python3.5学习之旅——day1

    本节内容: 1.Python介绍 2.Hello World程序 3.变量\字符编码 4.用户输入 5.if-else语句 6.循环语句 一.Python介绍 Python是一种动态解释性的强类型定义 ...

  5. Unity - 求反射向量 （2d）

    求反射向量 https://www.cnblogs.com/graphics/archive/2013/02/21/2920627.html 上面是大佬的公式可以去看一下 借的大佬的图 1.求入射向量 ...

  6. iOS项目的一般开发流程

  7. GO闭包

    package main import "fmt" func main() { add_func := add(1,2) fmt.Println(add_func(1,1)) fm ...

  8. 洛谷P1091合唱队形（DP)

    题目描述 NNN位同学站成一排,音乐老师要请其中的(N−KN-KN−K)位同学出列,使得剩下的KKK位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2,…,K1,2, ...

  9. jvm学习：类的加载、连接、初始化、常量

    类在jvm中有这几个过程类的加载.连接.初始化.使用.卸载 类的加载 类的加载是将class文件中的二进制数据加载到内存中,将其放在运行时的数据区:方法区内,然后在内存中创建一个 java.lang. ...

  10. 调用百度汇率api 获取各国的汇率值

    设置一个定时任务,每天更新汇率java代码如下 package com.thinkgem.jeesite.modules.huiLvApi.service; import java.io.Buffer ...