vue安装起手式(一)

首先架构Vue环境

# 最新稳定版npm install vue# 全局安装 vue-clinpm 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>

此部落格为个人前端学习记录
文章皆为参考网路教学，整合成个人学习日记，若有侵权烦请告知，随时修正。