iT邦幫忙

2

vue安裝起手式(一)

vue
  • 分享至 

  • xImage
  •  

首先架構Vue環境

# 最新稳定版
npm install vue
# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack myproject
# 安装依赖,走你
cd my-project

執行環境

npm install
npm run dev

安裝支持scss依賴

npm install sass sass-loader node-sass

安裝支持pug依賴

npm install pug pug-loader pug-filters

安裝完成後,進入到/build目錄下,打開webpack.base.conf.js 文件

將红框中的内容添加進文件:

{
  test: /\.scss$/,
  loader: 'style!css!sass?sourceMap'
},
{
  test: /\.jade$/,
  loader: "jade"
},
{
  test: /\.pug$/,
  loader: 'pug'
},

這樣.vue文件就可以支持pug,scss語法了

//使用pug语法
<template lang="pug">
  #app
    img.vue(src="./assets/logo.png")
    Hello
</template>
//使用scss语法
<style lang="scss">
  *{margin:0;padding: 0}
  body{
    background-image: url("/static/images/background.png");
    #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;
      img.vue{
        width: 80px;
        height: auto;
      }
    }
  }
</style>

此部落格為個人前端學習記錄
文章皆為參考網路教學,整合成個人學習日記,若有侵權煩請告知,隨時修正。/images/emoticon/emoticon41.gif


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
小魚
iT邦大師 1 級 ‧ 2017-10-08 09:45:57

這就是傳說中的vue.js嗎?
不過一定要在linux下執行嗎?
windows下可以嗎?

windows可以唷
我的電腦環境是windows

我要留言

立即登入留言