不使用cli创建Vue应用

最新推荐文章于 2022-11-26 17:37:36 发布

fang_ze_zhang

最新推荐文章于 2022-11-26 17:37:36 发布

阅读量717

点赞数

分类专栏： js Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/fang_ze_zhang/article/details/105436507

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

create Vue.js app use Single-file Components, without CLI

这是一篇翻译 + 总结。
粗略讲述了如何不通过 vue-cli 创建 vue 项目。
原文： How to create a Vue.js app using Single-File Components, without the CLI..

1. 创建项目结构：

创建 hello-world文件夹，命令行输入 npm init, 一路回车。
src文件夹：存放HTML，JS，.vue文件。
webpack.config.js文件：Webpack配置文件。
使用NPM：自动生成 package.json文件 + node_modules文件夹
在这里插入图片描述

2. 相关依赖：

vue：JS框架。
vue-loader & vue-template-compiler：将我们 .vue 文件转换成 JS。
webpack：工具，可以进行代码转换、打包。
webpack-cli：用来运行 webpack 命令。
webpack-dev-server：开发时的服务器。
babel-loader：将 ES6 转换成 ES5，它需要下面两个依赖。
@babel/core & @babel/preset-env：单独的 Babel 不会对你的代码做任何事情，这两个插件允许将我们的 ES6代码转换成 ES5。
css-loader：提取 .vue 文件里的CSS，或者我们 import 到 JS文件里的CSS，并解析路径。换句话说，找出CSS位置。我们需要接下来的 loader 来对CSS进行实际的处理。
vue-style-loader：获得从 css-loader 提取的CSS，注入到 HTML文件中。这将在 HTML文档头部创建并注入一个样式标签。
html-webpack-plugin：获得 index.html文件，在头部注入打包好的 JS文件，并将此文件拷贝到 dist文件夹。
rimraf：允许我们通过命令行删除文件。当多次 build 项目时，可以使用它删除旧的build文件。

npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env css-loader vue-style-loader html-webpack-plugin rimraf -D

3. 创建文件(src文件夹)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue hello world</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

main.js:

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

App.vue:

<template>
  <div id="app">
    <input type="text" v-model="message">
    <h2>{{message}}</h2>
    <h3>h3</h3>
    <button @click="clickFn">btn</button>
  </div>
</template>

<script>
  export default {
    name: "app",
    data() {
      return {
        message: 'hello world'
      }
    },
    methods: {
      clickFn () {
        this.a = `message: ${this.message}`;
        console.info(this.a);
      }
    }
  }
</script>

<style scoped>
#app {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: blue;
}
</style>

4. 配置Webpack

在根目录下创建 webpack.config.js文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [{
      test: /\.js$/,
      include: path.resolve(__dirname, 'src'),
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    },
    { test: /\.vue$/, loader: 'vue-loader' },
    { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new VueLoaderPlugin(),
  ]
};

接下来逐行解释：
1 ~ 2：引入两个插件。
3：引入 node 的 path 模块。
5：将配置导出( export )为对象，在运行 webpack 命令时可以对其访问。
6：入口。Webpack 需要一个起点，这里是 ./src/main.js，它会从 main.js 文件开始查找并梳理我们的代码。
7 ~ 10：出口。path：路径，filename：生成的打包文件的名称。
11 ~ 12：module 对象，其中有一个规则数组( module.rules )，每个规则告诉 webpack 如何处理某些文件
13 ~ 21(rule)：指示 webpack 使用 babel-loader 处理 src文件夹里的 .js文件。(Babel 会将 ES6 转换成 ES5)
22(rule)：指示 webpack 使用 vue-loader 将 .vue文件转换成 JS。(不要忘了29行的关联插件)。
23(rule)：多个 loader 时，webpack 从右向左执行相关 loader。这里的两个 loader 告诉 webpack 从 Vue文件或者任何 JS文件中获取CSS(css-loader)，然后将其作为样式标签注入到HTML 中(vue-style-loader)。
25：plugins 数组，这里我们添加了两个插件。
26 ~ 28(plugin)：HtmlWebpackPlugin插件获取 index.html 文件位置，将打包好的 JS文件通过 script标签添加进去。在我们 build 我们的项目时，这个插件还会复制 HTML文件到我们的分发文件夹中。
29(plugin)：VueLoaderPlugin插件，与 vue-loader 一起解析我们的 .vue文件。

5. 设置 package.json 文件

配置完成后，查看我们的项目。我们期望每次修改项目时浏览器自动更新，就需要用到 webpack-dev-server。

"scripts": {
	"serve": "webpack-dev-server --mode development"
},

–mode development：非必须，告诉 webpack 当前是 开发者模式。当我们 build 项目时，可以换成 --mode production。

npm run serve

可以看到：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200410170459517.png

打开浏览器查看。此时如果修改 message 内容，浏览器会自动更新。h2 内容会随着 input 输入内容一起变化。但是如果此时修改 h3 里的内容，就会发现 h2 重新变回 “hello world”。这是因为浏览器进行了刷新，script标签和页面重新加载。也就是说，我们无法维持应用程序的状态。为了解决此问题，Webpack 提供了 热替换模块(Hot Module Replacement，也称 HMR)。
webpack.config.js文件中增加：

devServer: { 
	open: true,
	hot: true 
}

open：告诉 dev-server 在 server 启动后打开浏览器，即：执行 npm run server 后自动打开浏览器。
hot：启用 webpack 的 HMR 功能。

6. build 项目：

当我们执行 npm run serve 时，发现并没有文件创建。这是因为 webpack 只是在缓存中创建了这些文件。如果我们想要发布我们的项目，就需要 build。
使用 webpack 替换 webpack-dev-derver，使用 –mode production。删除之前的 build 文件：rimraf dist

"scripts": {
	"clean": "rimraf dist",
	"build": "npm run clean && webpack --mode production",
	"serve": "webpack-dev-server --mode development"
}

npm run build：会先执行 npm run clean，然后执行 webpack。创建一个dist文件夹，里面有我们的代码：
在这里插入图片描述

fang_ze_zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不使用cli创建Vue应用

create Vue.js app use Single-file Components, without CLI这是一篇翻译 + 总结。粗略讲述了如何不通过 vue-cli 创建 vue 项目。原文： How to create a Vue.js app using Single-File Components, without the CLI..1. 创建项目结构：创建 hello-...
复制链接

扫一扫