首页手记 [Vue.js学习之路]从vue-cli说起

[Vue.js学习之路]从vue-cli说起

标签：

Vue.js

安装vue-cli
```
$ npm install -g vue-cli
```

初始化

$ vue init webpack myFirstProject

从目录结构开始

build里面保存一些webpack的初始化配置，config保存一些项目初始化配置，index.html是首页,node_modules是依赖包，src保存主要代码，static保存静态文件，package.json保存一些依赖信息。

顺带说一下webpack是什么

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。每个项目下都必须配置有一个 webpack.config.js ，具体怎么用，我也不知道。

webpack.base.conf.js

打开build目录下的 webpack.base.conf.js

//部分
var path = require('path')
module.exports = {
entry: {
app: './src/main.js'
// entry:入口文件
},
output: {
path: config.build.assetsRoot,//输出路径
filename: '[name].js',//配置生成的文件名
},
resolve: {
extensions: ['.js', '.vue', '.json'],//模块后缀名
},
    loader: 'eslint-loader',//模块加载器
}

入口文件：src目录中的main.js

我们打开scr目录下的main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//引入模块
import Vue from 'vue'
//引入同级目录下的文件
import App from './App'
//引入路由
import router from './router'
//提示信息
Vue.config.productionTip = false
// new Vue实例化
/* eslint-disable no-new */
new Vue({
//最后效果将会替换页面中id为app的div元素
el: '#app',
/*使用路由*/
router,
//组件用这样的标签来包裹
template: '<App/>',
//当前页面想使用App这个组件
components: { App }
}

路由

其他东西都很好理解，路由是个什么东西？

在web开发中，“route”是指根据url分配到对应的处理程序。——贺师俊

我们来看看./router目录下的JS文件。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)
//配置使用路由
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

我们可以看到这里注册了一个路由，并且引入了一个Hello组件。并且在'/'下访问。

入口页App.vue

最后我们来看看App.vue

<template>
  <div id="app">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/logo.png">
<!-- 子页面的内容会注入到router-view -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#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;
}
</style>

node端之所以能识别.vue文件，是因为前面说的webpack在编译时将.vue文件中的html，js，css都抽出来合成新的单独的文件

让我们npm run dev

首先npm会去调用根目录下的package.json，找到dev脚本

"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},

然后一层一层目录去找直到找到config目录下的index.js

dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}