Vue-cli

发表于

Vue-cli

Vue-cli 俗称 “ 脚手架 “ 可以快速搭配起 Vue 项目，利用 webpack 管理项目，具有的功能 目录结构 , 本地调试 , 代码部署 , 热加载, 单元测试

npm install --global vue-cli

执行上述命令后，电脑就全局安装了 Vue-cli

先简单说一下 Webpack

Webpack

官网原话:

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

Webpack 的核心思想：所有的东西都是模块。

Webpack 就是一种模块化生产的工具

核心概念的东西有：

  • entrt (入口)

指示 Webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

  • output (输出)

告诉 Webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。

  • loader (加载)

让 Webpack 能够去处理那些非 JavaScript 文件（Webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块

  • plugins (插件)

执行范围更广的任务和功能(如热加载)

一个简易的webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const path = require('path');
const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

使用Vue-cli

中小型项目中，推荐用 vue init webpack-simple xxx 生成项目文件

大型项目中，则推荐用 vue init webpack xxx 生成项目文件

后者较前者的项目文件更完整，但一般情况，前者已经够用

前者生成的项目结构如下：

Vue-cli

src 放主要的代码文件

index.html 是页面输出

webpack.config.js 是 webpack 的配置文件

main.js 是入口文件

App.vue 是 Vue 的页面级文件，展示到页面的东西，都将从这里加载

dist 是打包生成的文件被隐藏，但存在

当我们使用不同组件的时候，应该在 src 下建一个文件夹 components 用于同意管理组件

  • 点到即止，暂且说到这，毕竟是初次接触，待了解深入了，再详说