從零構建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了
後續還請期待~
從零構建vue+webpack （一）