vue作为国产优秀开源项目已经火了很久 一直没太多时间去学习
首先 安装好node 配置好环境变量 这里我们直接使用官方的脚手架开发
npm install vue-cli
等待进度
vue init webpack 项目名
然后填写各种信息 完成后 npm run dev 即可进入开发模式
首先处理下bable
npm install --save-dev babel-preset-stage-0
我这里兼容ES7使用了stage-0 它包含stage-1, stage-2以及stage-3的所有功能
env包含了babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017
编辑.babelrc文件
"presets": ["env","stage-0"]
完成进行保存 接下来关闭烦人 eslint 打开webpack.base.conf.js找到createLintingRule注释掉 eslint内容
接着 添加less的支持
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
这样在style标签里 使用**lang=”less”**即可标注为less文件 自动进行编译
当然 也别忘了
npm install less less-loader --save-dev
接着 我们来看下文件结构 根目录下的index.html
这个其实就是入口文件 打开webpack.dev.conf.js就可以看见 webpack把进行编译好的js插入到页面之中
那么 插入的是谁呢？
entry: { app: './src/main.js' },
就是src中的main.js 我们来看看都是写了什么
import Vue from 'vue'
import App from './App'
import router from './router'
......
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
这里引用了VUE和APP和router
把APP（也就是APP.VUE 引用时候 vue可省略）定义为了一个template 也就是首页中的app标签将被替换为app.vue所包含内容
那router又是什么呢？ router就是router文件夹下面的index.js 里面包含了vue的路由信息
把文件单独出来有利于开发
现在我们来看vue文件
<template>
....
</template>
<script>
export default {
name: 'App',
data() {
return {
....
}
}}
</script>
<style>
....
</sty;e>
不同于在html中直接使用vue 在vue里不需要在new vue 了
只需 export 出结构即可 export里的 this也是当前vue文件形成的vue实例