从零构建vue+webpack （一）
?
寫在前面：
給自己看，日常寫業務有點兒繁瑣，嘗試著用vue+webpack 從零開始構建一個項目！
1.新建項目文件夾
運行命令 npm init (一路回車或者-y)
2.打開項目，新建src 文件夾，新建main.js，寫一句js語句
?
3.安裝webpack?
cnpm install webpack webpack-cli webpack-dev-server --save-dev (加了淘寶鏡像)?
package.json文件內添加
控制臺運行 npm run dev? 會打開本地的一個服務（webpack默認的，報錯信息先暫時不用管）?
證明webpack 安裝成功
4.簡單配置webpack
在項目文件夾內新建 webpack.config.js 簡單配置如下圖
打開package.json 添加自動打開瀏覽器配置
此時重新 npm run dev 會立即打開新窗口
添加build命令
運行? npm run build 看看是否成功
5.配置vue
先安裝部分依賴 cnpm install --save-dev file-loader stylus stylus-loader style-loader url-loader @babel/core@^7.0.0??babel-loader?css-loader@*?vue-loader vue-template-compiler?vue vue-router vuex
package文件夾
在該項目添加index.htnl,如 下圖
引入的js是直接測試npm run build 命令的效果
運行 npm run dev 打開本地服務
?
配置webpack loader 如下配置
module: {rules: [{test: /\.js$/, // 用正則匹配文件，用require或者import 引入的都會被匹配到loader: 'babel-loader',exclude: /node_modules/ // 此文件夾不加載 },{test: /\.css$/,use: ['style-loader','css-loader',// 'postcss-loader' ]// 另一種寫法 loader："style-loader!css-loader!postcss-loader" },{test: /\.(png|jpe?j|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: 'fonts/[name].[ext]?[hash]'} },{test:/\.vue$/,loader:'vue-loader'//vue-loader會把vue單文件直接轉成js },]},resolve: {extensions: ['.js', '.vue', '.json'], // 引入文件不用加后綴名 alias: {'@': path.resolve(__dirname,'./src') // ./src 路徑縮寫為 @ }},開始配置 vue
這個loader 是15版本的，要在webpack配置文件里配置 并安裝??html-webpack-plugin 插件 解析HTML
并在plugin 配置
?
main.js
import Vue from 'vue'; import App from './App'; new Vue ({el: '#app',template: '<App />',components: {App} })寫這種形式的要配置webpack （默認是H寫法）
?
根入口 index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue+webpack</title> </head> <body><div id="app"></div> </body> </html>src 文件內新建 App.vue文件
<template><div><h1>hello vue+webpack</h1></div> </template><script> export default {name: 'App' } </script>
項目內新建 static 文件夾
?
此時 一個簡單vue 腳手架就可以跑了！
6.配置 stylus? cnpm install stylus stylus-loader -D
webpack.config.js 添加
module: {rules: [...{test: /\.(stylus|styl)$/,use: ['style-loader','css-loader','stylus-loader']}, ] }
就可以用stylus寫css了
后續還請期待~
轉載于:https://www.cnblogs.com/xiaxuening/p/10570314.html
總結
以上是生活随笔為你收集整理的从零构建vue+webpack （一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何保证消息不被重复消费啊（如何保证消息
- 下一篇： linux ulimit 永久生效设置方