vue学习笔记（三）： 启动说明
程序员文章站
2022-04-14 20:20:53
1、启动页面：index.html hc ......</div>
<div class="content">
<p>1、启动页面：index.html</p>
<div class="cnblogs_code">
<pre class="brush: javascript;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>hcmanage</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html></pre>
</div>
<p>其中 <span style="color: #3366ff;"><em><div id=<span style="color: #ff0000;">"app"</span>></div> </em><span style="color: #000000;">是用于挂载页面的</span></span></p>
<p><span style="color: #3366ff;"><span style="color: #000000;">2、启动js: main.js</span></span></p>
<div class="cnblogs_code">
<pre class="brush: javascript;">import vue from 'vue' //引入vue.js
import app from './app' //引入app.vue
import router from './router' //引入router下的所有路由
import './plugins/element.js' //引入element-ui
vue.config.productiontip = false
new vue({
el: '#app',//要挂载的元素id
router,
components: { app },//挂载app组件
template: '<app/>'
})</pre>
</div>
<p>3、挂载的app.vue</p>
<div class="cnblogs_code">
<pre class="brush: javascript;"><template>
<div id="app">
<img src="./assets/logo.png">
<div>
<p>
if element is successfully added to this project, you'll see an
<code v-text="'<el-button>'"></code>
below
</p>
<el-button>el-button</el-button>
</div>
<!--下面js脚本加载的helloworld组件 msg是helloworld中要使用的变量-->
<helloworld msg="welcome to your vue.js app"/>
</div>
</template>
<script>
import helloworld from './components/helloworld.vue' //引入helloworld.vue
export default {
name: 'app',
components: {
helloworld
}
}
</script>
<style>
#app {
font-family: 'avenir', helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style></pre>
</div>
<p> </p>
<p>4、app.vue引入的helloworld.vue</p>
<div class="cnblogs_code">
<pre class="brush: javascript;"><template>
<div class="hello">
<!--用于接收加载页面传入的信息-->
<h1>{{ msg }}</h1>
<h2>essential links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
core docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
community chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
docs for this template
</a>
</li>
</ul>
<h2>ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'helloworld',
data () {
return {
msg: 'welcome to your vue.js app'
}
}
}
</script>
<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style></pre>
</div>
<p> </p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/594498.html">
内置对象Cookie和Session有何不同【常见面试题】 </a>
</p>
<p>
下一篇： <a href="/article/594500.html">
Python——day2 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2135145.html" target="_blank" title="Python学习笔记之常用函数及说明">
<h2>
Python学习笔记之常用函数及说明 </h2>
</a>
</li>
<li>
<a href="/article/2123974.html" target="_blank" title="C# LINQ学习笔记三：LINQ to OBJECT之操作字符串">
<h2>
C# LINQ学习笔记三：LINQ to OBJECT之操作字符串 </h2>
</a>
</li>
<li>
<a href="/article/2116408.html" target="_blank" title="oracle学习笔记(三)">
<h2>
oracle学习笔记(三) </h2>
</a>
</li>
<li>
<a href="/article/2114208.html" target="_blank" title="三星笔记本开机启动失败 出现all boot options are tried">
<h2>
三星笔记本开机启动失败 出现all boot options are tried </h2>
</a>
</li>
<li>
<a href="/article/2111641.html" target="_blank" title="vue ssr 实现方式(学习笔记)">
<h2>
vue ssr 实现方式(学习笔记) </h2>
</a>
</li>
<li>
<a href="/article/2103967.html" target="_blank" title="Vue2学习笔记之请求数据交互vue-resource">
<h2>
Vue2学习笔记之请求数据交互vue-resource </h2>
</a>
</li>
<li>
<a href="/article/2103470.html" target="_blank" title="Vue2.5学习笔记之如何在项目中使用和配置Vue">
<h2>
Vue2.5学习笔记之如何在项目中使用和配置Vue </h2>
</a>
</li>
<li>
<a href="/article/2094979.html" target="_blank" title="sql学习笔记（三）—— 联表查询">
<h2>
sql学习笔记（三）—— 联表查询 </h2>
</a>
</li>
<li>
<a href="/article/2092123.html" target="_blank" title="【学习笔记】第三方登录之GitHub篇">
<h2>
【学习笔记】第三方登录之GitHub篇 </h2>
</a>
</li>
<li>
<a href="/article/2091445.html" target="_blank" title="JavaScript的MVVM库Vue.js入门学习笔记">
<h2>
JavaScript的MVVM库Vue.js入门学习笔记 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>