不要说你一点 vue 都不会来看这偏文章哦
webpack
npm run build
main.js 改成如下
新建一个 app.vue 文件
import Vue from 'vue'
import './styles/main.CSS'
import App from './app.vue'
new Vue({
el:"#app",
template:'<App/>',
components:{App}
})
<!--我好像还没说引入less哦,下面说-->
<template>
<div id="app">
<img src="./images/logo.png" alt="logo" />
<span>
{{msg}}
</span>
<p class="test">
test text
</p>
</div>
</template>
<script>
import Vue from 'vue'export
default {
name:
'app',
data() {
return {
msg: "hello vue !!"
}
},
}
</script>
<style>
.test{ color:#020202 }
</style>
<style lang="less">
别忘了弄张 图片 ,写个 main.css 哦
#app{ img{width:100px;} }
</style>
我还引入了 reset.css
/*main.css*/
@import './reset.css';
#app{
color:red;
}
用 less 或者 sass
你可以在项目中用 less 或者 sass,相对的就要安装 less-loader 和 sass-loader
如果没有在全局安装 less 或 sass 编译器的话还有安装一下,执行上面 loader 安装之前先安装 less 或 sass
npm install --save-dev less-loader
npm install --save-dev sass-loader
安装到本项目中
npm install --save-dev less
安装到全局中
npm install --g less
以 less-loader 为例,修改 webpack.config.js
使用 vue 单文件组件的时候给 lang 属性添加标识就可以了,less 后缀的文件也会一起进行编译
{
test:/\.less$/,
use:[
'vue-style-loader'
'css-loader',
'less-loader'
]
},
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
'less':[//lang属性对应的名称
'vue-style-loader'//首先给vue的样式loader过滤一遍
'css-loader',//css-loader,把css转js
'less-loader'//用less编译
]
}
}
}
sass 类似,但 sass 带有两种语法规范 sass 和 scss,需要分别设置,下面就贴一点 vue-cli 的代码,不过的介绍了.
<style lang="less">
#app{
img{width:100px;}
}
</style>
根据 less 和 sass 预处理器的添加和配置方法,你可以用上 typeScript,pug 等 js 和 html 的预处理插件.记得给 template,script,style 标签添加 lang 属性说明哦
有了 es6 用上 js 的其他预处理语言的情况也不多了,html 的话还是习惯写完整 dom
打包运行一下
打包之前我改改 npm scripts, 这样就可以看到打包进度,和隐藏不必要的信息
"build": "webpack --progress --hide-modules"
运行打包
npm run build
在浏览器中打开 index.html, 可以看到运行正常
下期预告
目前整个 vue 项目基本可用,但是还处在最基础的 loader 添加和配置阶段,后续还有热插拔,代码提取,代码压缩的等一系列 plugins(插件)的引入.
有 vue-cli 和 webpack 使用基础的人会认为,以上内容更偏向入门,但是凡事都有一个顺序渐进的过程,对初学者来说从 0 开始搭建是一个很有效的学习过程,基础工程搭好了,后面就是重头戏了.
下一期我们来进一步添加插件实现更多的功能,也会引入编译器转换器的第三方配置介绍(.babelrc,postcss).下一篇文章将在两三天之内发布
参考
webpack 搭建 vue 项目 (https://juejin.im/post/5a425cb4f265da43294e4f2e)
vue-loader 官方文档(https://vue-loader.vuejs.org/zh-cn/)
wepack 中文文档(http://www.css88.com/doc/webpack2/)
来源: https://juejin.im/post/5a531f4c6fb9a01cb80f926f