基于vue构建前端应用

安装Node.js

关于Node.js

Node.js是一个基于 Chrome V8 引擎 的异步驱动的 JavaScript 运行时

HTTP 是 Node.js 中的一等公民。它设计的是流式和低延迟。这使得 Node.js 非常适合于 web 库或框架的基础。(了解更多)

安装

根据自己的操作系统选择并下载对应的安装包，然后点击安装包即可安装。

下载地址：下载 | Node.js

更多安装方式：通过包管理器安装 Node.js | Node.js

Node.js默认自带有一个包管理工具npm，通过npm可以查找、安装、共享、分发代码以及管理项目依赖关系。

还有个包管理工具叫yarn，号称快速（缓存已经下载的包、并行操作）、可靠（使用格式详尽而又简洁的 lockfile文件 和确定性算法来安装依赖）、安全（执行前校验其完整性），选用哪个，根据自己的需要进行选择（更多关于yarn的信息：Yarn 中文文档）。

yarn的安装：

• windows，下载mis文件安装：https://classic.yarnpkg.com/zh-Hans/docs/install#windows-stable）
• macOS，通过brew安装：brew install yarn

安装Vue CLI

关于Vue CLI

摘自官网：

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
• 可升级；
• 基于 webpack 构建，并带有合理的默认配置；
• 可以通过项目内的配置文件进行配置；
• 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

更多关于Vue CLI内容：介绍 | Vue CLI

安装

安装命令（-g或global表示全局安装）：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Vue CLI安装完成，就可以在命令行执行vue命令了。

localhost:demo me$ vue -V
@vue/cli 4.3.1

创建项目

命令

vue create [options] <app-name>

相关选项：

options：
  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

示例

执行命令：vue create vue-demo

localhost:demo me$ vue create vue-demo


Vue CLI v4.3.1
? Please pick a preset: default (babel, eslint)


Vue CLI v4.3.1
✨  Creating project in /opt/demo/vue-demo.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


yarn install v1.19.1
info No lockfile found.
[1/4] 🔍  Resolving packages...


success Saved lockfile.
✨  Done in 24.82s.
🚀  Invoking generators...
📦  Installing additional dependencies...


yarn install v1.19.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...


success Saved lockfile.
✨  Done in 4.81s.
⚓  Running completion hooks...


📄  Generating README.md...


🎉  Successfully created project vue-demo.
👉  Get started with the following commands:


 $ cd vue-demo
 $ yarn serve

vue-demo项目结构

运行项目

安装依赖

如果在package.json中配置的依赖没有安装，进入Vue项目的目录，执行yarn install命令安装依赖。

localhost:vue-demo me$ yarn install
yarn install v1.19.1
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.46s.

代码审查

运行前，可以执行yarn lint命令审查代码，修正错误。

localhost:vue-demo me$ yarn lint
yarn run v1.19.1
$ vue-cli-service lint
 DONE  No lint errors found!
✨  Done in 1.20s.

编译打包

public目录下的文件保持原样，src下的文件会被编译、压缩、打包，默认输出目录为dist。dist目录下的文件可以直接部署到web服务器上，如nginx。

命令：yarn build

localhost:vue-demo me$ yarn build
yarn run v1.19.1
$ vue-cli-service build

⠹  Building for production...

 DONE  Compiled successfully in 4876ms                                         下午4:11:37

  File                                 Size               Gzipped

  dist/js/chunk-vendors.f50f9912.js    89.18 KiB          31.94 KiB
  dist/js/app.d1d050a0.js              4.62 KiB           1.64 KiB
  dist/css/app.fb0c6e1c.css            0.33 KiB           0.23 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

✨  Done in 8.77s.

直接运行

命令：yarn serve

localhost:vue-demo me$ yarn serve
yarn run v1.19.1
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin


 DONE  Compiled successfully in 1319ms                                         下午4:18:44


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.80:8080/


  Note that the development build is not optimized.
  To create a production build, run yarn build.

package.json

项目元信息配置文件。

vue.config.js

编译、打包信息配置，用于覆盖默认的配置，可选。vue.config.js和package.js同级目录，会被@vue/cli-serve自动加载。

Vue CLI 3之后不会自动创建该文件，如有需要手动创建（更多配置：配置参考 | Vue CLI）。

下面是一个示例。

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

// vue.config.js
module.exports = {
  // 部署应用包时的基本URL,从 Vue CLI 3.3新增（替换baseUrl)
  publicPath: '/',

  // 打包文件输出目录 构建时传入 --no-clean 可关闭该行为
  outputDir: 'dist',

  // 打包文件时静态资源 (js、css、img、fonts)输出目录 (相对于 outputDir目录）
  assetsDir: '',

  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  indexPath: 'index.html',

  // 默认在生成的静态资源文件名中包含hash值以控制缓存
  filenameHashing: true,
  
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,

  // 开发时，每次保存代码时否进行代码审查
  lintOnSave: false,

  // 页面配置
  pages: {
    // 入口文件配置
    index: {
      // page 的入口
      entry: './src/main.js',

      // 模板来源
      template: 'public/index.html',

      // 在 dist/index.html 的输出
      filename: 'index.html',

      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',

      // 在这个页面中包含的块，默认情况下会包含// 提取出来的通用 chunk 和 vendor chunk。   
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },

  // webpack配置。如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
  // 如果这个值是一个函数，则会接收被解析的配置作为参数。 
  // 该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。 
  configureWebpack: config => {

    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    }else {
      // 为开发环境修改配置...
    }
  },

  // 是一个函数，接收一个基于 webpack-chain 的 ChainableConfig 实例。
  // 允许对内部的 webpack 配置进行更细粒度的修改 
  chainWebpack: (config) => {
    // 配置别名
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@comp', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@layout', resolve('src/layout'))
      .set('@static', resolve('src/static'))
  },

  // CSS样式配置
  css: {
    // loader配置，向CSS相关的loader传递选项
    loaderOptions: {
      less: {
        // 这里的选项会传递给 less-loader
        modifyVars: {
          'primary-color': '#F5222D',
          'link-color': '#F5222D',
          'border-radius-base': '4px',
        },
        javascriptEnabled: true,
      },
      css: {
        // 这里的选项会传递给 css-loader
      },
    }
  },

  // 开发环境服务器配置
  devServer: {
    // 设置为0.0.0.0则所有的地址均能访问
    host: '0.0.0.0',
    // 跳过host检测
    disableHostCheck: true,
    // 端口
    port: 3001,
    // 代理
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

组件调用流程

Vue单文件组件

Vue单组件文件是一个自定义的文件类型，扩展名为.vue ，它用类 HTML 语法描述一个 Vue 组件，每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，

如（单文件组件规范 | Vue Loader）：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 100px;
  text-align: center;
  padding: 50px;
}
</style>

调用流程

更多：知识就是力量 | SpreadK