前提:安装了node.js与npm
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 中使用