最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

vue安裝起手式(一)

XAMPP下载 admin 1181浏览 0评论
 首先架構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
安裝完成後,進入到ild目錄下,打開webpack.base.conf.js 文件
QQ截图20180923105737
 將红框中的内容添加進文件:
{
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>

转载请注明:XAMPP中文组官网 » vue安裝起手式(一)

您必须 登录 才能发表评论!