1.初始化
新建目录 初始化(npm init)–>自动创建package.json
进行基础配置和包下载并测试，参考此文https://blog.csdn.net/weixin_38598636/article/details/85342827
安装这些基础的包和配置，确保测试成功后在进行下一步
2.创建业务目录
其中test.js和index.js是之前测试用的，可忽略
webpack.config.js在第一步测试时的配置
3.安装需要用到的配置
-
sass loader 在webpack.config.js中的module写scss的loader
npm install sass-loader node-sass --save-dev -
html-loader 在webpack.config.js中的module写html的loader
npm install sass-loader node-sass --save-dev -
vue-loader
npm install vue-loader vue-template-compiler --save-dev
在webpack.config中引入：
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module:{
plugins: [new VueLoaderPlugin()]
}
- vue 和vue-router
npm install vue vue-router - clean-webpack-plugin 用于每次打包删掉之前的文件
npm i clean-webpack-plugin --save-dev
4.给文档写内容
给reset.css和home.vue、router/index.js（参看vuerouter文档）、App.vue、main.js写内容
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip=false;
new Vue({
el:'#app',
router,
components:{
App
},
template:"<App></App>"
})
router/index.js
import Vue from "vue";
import Router from "vue-router";
import Home from "../home/home.vue";
Vue.use(Router);
export default new Router({
routes:[{
path:'/',
name:'home',
component: Home
}]
})
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default{
name:'App'
}
</script>
<style lang="css">
</style>
home.vue引用reset.css写一些简单的scss样式测试能否编译，这里不写了。
写HtmlWebpackPlugin（修改配置）的模板文件views/index.html,必须有class=“app”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义模板</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
6.运行服务
webpack-dev-server --open
发现浏览器报错：
去vue官网搜runtime-only相关的资料，发现此时的vue是只运行时版本，缺了用于浏览器的编译器，希望使用完整版，则需要在打包工具（webpack.config.js）里配置一个别名：
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
}
}
重启服务，成功，home.vue内容显示并渲染reset.scss的样式
webpack.config.js配置如下：
7.实现css模块化和px-to-rem
此时class名字是“home”，且大小的单位是160px。
到vue-loader的官网看看如何实现css模块化和npm网站看看px-rem。
此时class的名字是“home_5Js2mKwm”，大小单位是2.13333333rem
loader的修改如下
8.待实现
1.提取css，让所有样式存放在一个文件里
2.添加eslint功能
扫一扫
396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
