vue学习笔记（三）： 启动说明
程序员文章站
2022-06-22 10:38:16
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/1488612.html">
java正则表达式大全（常用） </a>
</p>
<p>
下一篇： <a href="/article/1488614.html">
项目分享：模拟购物车 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2234223.html" target="_blank" title="SQL学习笔记三 select语句的各种形式小结">
<h2>
SQL学习笔记三 select语句的各种形式小结 </h2>
</a>
</li>
<li>
<a href="/article/2232534.html" target="_blank" title="三星笔记本开机启动失败 出现all boot options are tried">
<h2>
三星笔记本开机启动失败 出现all boot options are tried </h2>
</a>
</li>
<li>
<a href="/article/2225935.html" target="_blank" title="oracle学习笔记(三)">
<h2>
oracle学习笔记(三) </h2>
</a>
</li>
<li>
<a href="/article/2206654.html" target="_blank" title="MySQL高级学习笔记（三）：Mysql逻辑架构介绍、mysql存储引擎详解">
<h2>
MySQL高级学习笔记（三）：Mysql逻辑架构介绍、mysql存储引擎详解 </h2>
</a>
</li>
<li>
<a href="/article/2198933.html" target="_blank" title="PHP 面向对象程序设计（oop）学习笔记(三) - 单例模式和工厂模式">
<h2>
PHP 面向对象程序设计（oop）学习笔记(三) - 单例模式和工厂模式 </h2>
</a>
</li>
<li>
<a href="/article/2192119.html" target="_blank" title="vue学习笔记五：在vue项目里面使用引入公共方法详解">
<h2>
vue学习笔记五：在vue项目里面使用引入公共方法详解 </h2>
</a>
</li>
<li>
<a href="/article/2181623.html" target="_blank" title="第三周LINUX学习笔记">
<h2>
第三周LINUX学习笔记 </h2>
</a>
</li>
<li>
<a href="/article/2170071.html" target="_blank" title="python网络编程学习笔记(三)：socket网络服务器">
<h2>
python网络编程学习笔记(三)：socket网络服务器 </h2>
</a>
</li>
<li>
<a href="/article/2168765.html" target="_blank" title="Docker学习笔记之容器查看启动终止删除的方法">
<h2>
Docker学习笔记之容器查看启动终止删除的方法 </h2>
</a>
</li>
<li>
<a href="/article/2159966.html" target="_blank" title="vue.js学习笔记之绑定style样式和class列表">
<h2>
vue.js学习笔记之绑定style样式和class列表 </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>