在工程目录下创建 src 目录和文件
app.vue
<template>
<div id="text">
{{text}}
</div>
</template>
<script>
export default {
data(){
return {
text : "a"
}
}
}
</script>
<style>
#text{
color: black;
opacity: 0.3;
}
</style>
index.js
import Vue from "vue"
import App from "./app.vue"
import "./assets/styles/test.css"
import "./assets/images/bg.jpg"
import "./assets/styles/test-stylus.styl"
const root = document.createElement("div")
document.body.appendChild(root)
new Vue({
render: (h) => h(App)
}).$mount(root)
通过 import 引入文件和模块,new Vue().$mount( 某个元素 ) 是将某个元素替换成某个模板,这里是将刚创建的 root 替换成了 app.vue 中 <template></template> 的内容。
test-stylus.styl
body
font-size 20px
.styl 文件写法还有功能和 .css 一样,只是没有符号方便敲代码罢了,.styl 最终webpack打包后也是转换成 css 语句,所以可以不需要 .styl 文件
最后运行下面命令就可以通过浏览器访问了,访问端口在 webpack.config.json 看,我的是 0.0.0.0:9000
npm run dev
这条命令如果出错看我上一篇的配置