使用webpack搭建vue项目(不使用vue-cli脚手架)过程记录


原文地址:使用webpack搭建vue项目(不使用vue-cli脚手架)过程记录

本篇文章记录了如何不使用vue脚手架开发vue项目,本文包含了所有webpack搭建vue示例代码。文章只是做记录使用,如果有不懂的地方请自行百度,小白绕道。

1.需要nodejs环境

debian系列安装

sudo apt install nodejs

windows直接下载nodejs安装包

2.需要安装webpack和webpack-cli

npm install webpack webpack-cli

3.执行webpack init命令

webpack init

执行该命令的时候会有很多选择题需要做,根据你自己的需要选择yes or no。记得一定要开启webpack的serve命令,之后开发的时候需要用。

4.安装vue所需依赖包

npm install vue
npm install vue-loader vue-loader-plugin vue-template-compiler --save-dev

5.在 webpack.config.js里定义常量

const VueLoaderPlugin = require('vue-loader-plugin');

在const config对象中添加如下代码:

 new VueLoaderPlugin()
resolve:{
 // 之后引入的文件不用添加后缀
 extensions:['.js','.css','.vue'],
 },
 {
 test: /\.vue$/,
 use: {
 loader: 'vue-loader'
 }
 }

6.在webpack.config.js中config对象中指定开发服务器端口:

devServer: {
 open: true,
 host: '127.0.0.1',
 port:3007
 },

7.最后执行npm run serve命令开始开发

npm run serve

注意:在linux系统开发如果localhost无法访问把localhost改成127.0.0.1

完整的webpack.config.js示例

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const VueLoaderPlugin = require('vue-loader-plugin');

const isProduction = process.env.NODE_ENV === 'production';


const stylesHandler = 'style-loader';



const config = {
 entry: './src/index.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 },
 devServer: {
 open: true,
 host: '127.0.0.1',
 port:3007
 },
 plugins: [
 new HtmlWebpackPlugin({
 template: 'index.html',
 }),
 new VueLoaderPlugin()

 // Add your plugins here
 // Learn more about plugins from https://webpack.js.org/configuration/plugins/
 ],
 resolve:{
 // 之后引入的文件不用添加后缀
 extensions:['.js','.css','.vue'],
 },
 module: {
 rules: [
 {
 test: /\.(js|jsx)$/i,
 loader: 'babel-loader',
 },
 {
 test: /\.css$/i,
 use: [stylesHandler,'css-loader'],
 },
 {
 test: /\.s[ac]ss$/i,
 use: [stylesHandler, 'css-loader', 'sass-loader'],
 },
 {
 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
 type: 'asset',
 },
 {
 test: /\.vue$/,
 use: {
 loader: 'vue-loader'
 }
 }

 // Add your rules for custom modules here
 // Learn more about loaders from https://webpack.js.org/loaders/
 ],
 },
};

module.exports = () => {
 if (isProduction) {
 config.mode = 'production';


 config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());

 } else {
 config.mode = 'development';
 }
 return config;
};

   完整的index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router';
import Vuex from 'vuex'

Vue.use(VueRouter)
Vue.use(Vuex)

import myRouter from "./router";

let router = new VueRouter({
 mode:'history',
 //路由前缀
 base: 'admin',
 routes:myRouter
});

const store = new Vuex.Store({
 state: {
 currentUserData: false
 },
 mutations: {
 setUserData (state) {

 
 }
 }
});

router.beforeEach((to,from,next) => {

 store.commit('setUserData');

 next();
});

import App from './App'

new Vue({
 el: '#app',
 store,
 router:router,
 render : h => h(App)
});

App.vue文件

<template>
 <div>
 <h1>Hello World!</h1>
 <router-view />
 </div>
</template>
<script>
export default {
 name: "admin",
 data(){
 return {}
 }
}
</script>
<style>

</style>

router.js文件

export default [
 {
 path:'/dashboard',
 name:"dashboard",
 component:resolve => void (require(['./pages/index/dashboard.vue'], resolve)),

 }
]

最后运行npm run server就可以开始开发了

评论

登录后评论

服务器优惠活动

Top