VUE框架使用第三方组件库和图标库内容------VUE框架 迷南。 2024-02-26 05:24 35阅读 0赞 > npm install font-awesome > > npm install font-awesome > npm i element-ui -S > > npm i element-ui -S > npm run serve > > npm run serve > npm install -g @vue/cli > > npm install -g @vue/cli > vue create Hello(your project) > > vue create Hello(your project) > <template> > <!-- <div id="app"> > <img alt="Vue logo" src="./assets/logo.png"> > <HelloWorld msg="Welcome to Your Vue.js App"/> > </div> --> > <div id="app"> > <Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie> > <Hello></Hello> > <Hello1></Hello1> > </div> > </template> > > <script> > // import HelloWorld from './components/HelloWorld.vue' > import Movie from './components/Movie.vue' > import Hello from './components/Hello.vue' > import Hello1 from './components/Hello1.vue' > Movie,name > export default { > name: 'App', > data:function(){ > return{ > movies:[ > {id:1,title:"金刚狼",rating:8.7}, > {id:1,title:"金刚狼",rating:8.8}, > {id:1,title:"金刚狼",rating:8.6} > ] > } > }, > components: { > // HelloWorld > Movie, > Hello, > Hello1 > } > } > </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> > > <template> > > <!-- <div id="app"> > > <img alt="Vue logo" src="./assets/logo.png"> > > <HelloWorld msg="Welcome to Your Vue.js App"/> > > </div> --> > > <div id="app"> > > <Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie> > > <Hello></Hello> > > <Hello1></Hello1> > > </div> > > </template> > > <script> > > // import HelloWorld from './components/HelloWorld.vue' > > import Movie from './components/Movie.vue' > > import Hello from './components/Hello.vue' > > import Hello1 from './components/Hello1.vue' > > Movie,name > > export default \{ > > name: 'App', > > data:function()\{ > > return\{ > > movies:\[ > > \{id:1,title:"金刚狼",rating:8.7\}, > > \{id:1,title:"金刚狼",rating:8.8\}, > > \{id:1,title:"金刚狼",rating:8.6\} > > \] > > \} > > \}, > > components: \{ > > // HelloWorld > > Movie, > > Hello, > > Hello1 > > \} > > \} > > </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> > <template> > <div> > <h1>{ > {title}}</h1> > <span>{ > {rating}}</span> > <button @click="fun">点击收藏</button> > <i class="fa fa-camera-retro"></i> > </div> > </template> > <script> > export default{ > name:"Movie", > props:["title","rating"], > data:function(){ > return{ > > } > }, > methods:{ > fun(){ > alert("收藏成功") > } > } > } > </script> > <style> > > </style> > > <template> > > <div> > > <h1>\{ \{title\}\}</h1> > > <span>\{ \{rating\}\}</span> > > <button @click="fun">点击收藏</button> > > <i class="fa fa-camera-retro"></i> > > </div> > > </template> > > <script> > > export default\{ > > name:"Movie", > > props:\["title","rating"\], > > data:function()\{ > > return\{ > > \} > > \}, > > methods:\{ > > fun()\{ > > alert("收藏成功") > > \} > > \} > > \} > > </script> > > <style> > > </style> > import Vue from 'vue'; > import App from './App.vue'; > import ElementUI from 'element-ui'; > import 'element-ui/lib/theme-chalk/index.css'; > import 'font-awesome/css/font-awesome.min.css'; > Vue.config.productionTip = false > Vue.use(ElementUI); > new Vue({ > render: h => h(App), > }).$mount('#app') > > import Vue from 'vue'; > > import App from './App.vue'; > > import ElementUI from 'element-ui'; > > import 'element-ui/lib/theme-chalk/index.css'; > > import 'font-awesome/css/font-awesome.min.css'; > > Vue.config.productionTip = false > > Vue.use(ElementUI); > > new Vue(\{ > > render: h => h(App), > > \}).$mount('\#app')
还没有评论，来说两句吧...