前端webpack+node+vue（三）

在工程目录下创建 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

这条命令如果出错看我上一篇的配置