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

释放双眼,带上耳机,听听看~!
  • 安装vue-cli
    $ npm install -g vue-cli
  • 初始化
    $ vue init webpack myFirstProject

    从目录结构开始

    [Vue.js学习之路]从vue-cli说起
    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
    }
  • 结束

参考资料:vue-cli#2.0项目结构分析

【转自慕课】https://www.imooc.com

Vue.js

2017年前端工程师技能规划

2022-3-8 10:36:22

Vue.js

Vue 源码解读(10)—— 编译器 之 生成渲染函数

2022-3-8 12:44:28

搜索