前提:安装了node.jsnpm

1.建立一个npm项目 
新建项目文件夹,打开终端,将路径移动至此文件夹,初始化输入

npm init

按照提示输入项目名称,描述,作者等信息(可回车跳过) 
成功创建npm项目

2. 安装所需要的包 
在终端中输入

npm install webpack vue vue-loder css-loader vue-template-compiler

*可根据警告中的提示安装缺少的包 
等待安装完成

3.建立源码放置的目录 
在项目文件夹中新建一个文件夹src作为源码放置目录 
在此目录中可以创建.vue文件 例如创建app.vue

<template>
<div id="main">{{text}}</div>
</template>
<script>
export default {
data(){
return {
text:"welcome to vue.js"
}
}
}
</script>
<style>
#main{
font-size: 26px;
color: red;
}
</style>

但是,.vue文件无法在浏览器当中直接运行,所以我们需要用一定的方法使之可以运行

4.创建入口文件 
在src目录下创建入口文件index.js,将vue渲染到HTML中,模板如下

import Vue from 'vue'
import App from './app.vue' const root = document.createElement('div');
document.body.appendChild(root); new Vue({
render:(h) => h(App)/*渲染内容*/
}).$mount(root)/*挂载元素*/

5.创建webpack.config.js文件 
在项目文件夹中创建一个webpack.config.js文件,模板如下

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry:path.join(__dirname,'src/index.js'),
output: {
filename: "bundle.js",
path: path.join(__dirname,'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},/*为.vue文件配置加载器,只支持原生js*/
plugins: [
new VueLoaderPlugin()
],
mode: 'development',
}

在此文件中要声明入口和出口,路径使用绝对路径

6.修改package.json文件 
为根目录下package.json文件中scripts添加代码

"build": "webpack --config webpack.config.js"

添加此代码后的package.json模板为

{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^1.0.1",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.23.1"
},
"devDependencies": {
"webpack-cli": "^3.1.2"
}
}

完成以上步骤后,在终端输入

npm run build

运行无误后发现根目录中新增了一个名为dist的文件夹,其中有一个名为bundle.js文件,此文件为npm将各类资源打包之后产生的文件 
这样,就完成了项目的配置

注意:最新的 vue-loader 还需要在 webpack.config.js中的plugins 中使用

vue-loader+webpack配置项目流程的更多相关文章

  1. 基于Vue 和 webpack的项目实现

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  2. vue和webpack打包 项目相对路径修改

    一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...

  3. vue+vue-cli2+webpack配置资源cdn

    vue-cli2+webpack构建的vue项目如何让图片和js等静态资源走cdn,哪里可以配置呢?下面我详细介绍 1.config/index.js中可以看到 module.exports = { ...

  4. vue及webpack在项目中的一些优化

    传送:https://www.haorooms.com/post/vue_webpack_youhua

  5. webpack配置(vue)

    Vue-loader Vue-loader 是一个加载器,能把 .vue 文件转换为js模块. Vue Loader 的配置和其它的 loader 不太一样.除了将 vue-loader 应用到所有扩 ...

  6. VUE环境搭建,项目配置(Windows下)

    公司想做官网,框架我自己定,然后就选了vue,那现在就来加深一遍vue的环境的搭建吧 1.安装node.js,这里就不再多说了,很简单,如果之前有安装就不用再安装了,可node -v查看node版本 ...

  7. Vue Loader

    介绍 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug(模板 ...

  8. 新手入门vue 使用vue-cli创建项目

    本文是针对对于完全没有了解过vue 和npm,连运行环境和项目构建的都不会的小白,对于前端老司机的就不用看了,浪费时间. 使用npm 与vue-cli 构建vue 项目 第一步:安装运行环境(node ...

  9. VUE.JS 环境配置

    首先安装   node.js 网址 https://nodejs.org/en/ 选择版本 点击直接安装OK  (不用安装到系统盘) 然后cmd 命令框 输入 npm -version (查看安装版本 ...

随机推荐

  1. Android中如何判断内存卡是否存在

    if (Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED)) { /* 得到SD卡得路 ...

  2. 转:git常用操作

    转自:https://www.cnblogs.com/donghaojun/p/10906981.html 开发常用git指令:git init  # 初始化本地git环境 git clone xxx ...

  3. java基础4(线程)

    1.请简单描述什么是并行,什么是并发? 并行:指两个或多个事件在同一时刻发生(同时发生). 并发:指两个或多个事件在同一个时间段内发生. 通俗易懂版: 你吃饭吃到一半,电话来了,你一直到吃完了以后才去 ...

  4. python 利用pyttsx3文字转语音

    # -*- coding: utf-8 -*- import pyttsx3 f = open("all.txt",'r') line = f.readline() engine ...

  5. 1、CentOs安装

    转载自:代码之美 0.准备工作: 一台没系统的普通电脑u盘一个(大于1G,最小安装的话不超过1G,根据选择系统大小匹配U盘即可)CentOS7.3 iso文件一个UltraISO工具 1.制作U盘 ① ...

  6. urllib.parse:很底层,但是是一个处理url路径的好模块

    介绍 urllib.parse是为urllib包下面的一个模块,urllib的其它模块完全可以使用requests替代.但是urlli.parse我们是有必要了解的,因为该模块下面有很多操作url路径 ...

  7. 8.Canny边缘检测

    #导入工具包 from imutils import * image = imread('image/school.jpg') show(image) def edge_detection(image ...

  8. sql 184. 部门工资最高的员工

    Employee 表包含所有员工信息,每个员工有其对应的 Id, salary 和 department Id. +----+-------+--------+--------------+| Id ...

  9. 关于boost::asio

    // BoostServer.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #incl ...

  10. Python assert statement

    Python assert statement 关于assert想找到文档中的例子:但是搜索python文档没找到. 看到这篇文章:对初学者很有帮助:https://www.programiz.com ...