在Ubuntu上安装并使用Vue2的基本教程

我也准备要尝试一些前端开发了！发现网上有些教程写得挺好，但是还是有点老（并且有点错误），所以这里更新一下：

主要参考了这篇教程：Vue2------1. 安装教程_vue2 cdn-CSDN博客

并且使用NPM方式进行安装：

上面教程中提到，访问node.js官网：https://nodejs.org/zh-cn/download 然后就可以看到不同的安装方式。除了这些，在ubuntu上还可以这样安装：

bash 复制代码

sudo apt-get update
sudo apt-get install nodejs npm

然后再运行：

bash 复制代码

node -v
npm -v

就可以看到node.js和npm的版本，不是很新，但是应该是可以用的。

然后按照上面的教程：

bash 复制代码

# 创建项目文件夹
mkdir vue-npm-demo
# 进入项目文件夹
cd vue-npm-demo
# 初始化项目（创建package.json文件）
npm init -y

就可以看到在文件夹下生成了package.json文件。然后运行：

bash 复制代码

npm install vue@2.7.16 --save

和上面那个链接教程不一样，我这里安装的是Vue2的最终版。然后可以看到文件夹下面多了node_modules和package-lock.json两个文件夹。（--save参数表示将Vue添加到项目依赖中，会在package.json文件中记录。）

接下来按照这个目录结构创建两个文件夹：

bash 复制代码

vue-npm-demo/
├── node_modules/      # 依赖包目录
├── public/            # 静态文件目录
│   └── index.html     # 入口HTML文件
├── src/               # 源代码目录
│   └── main.js        # 入口JavaScript文件
├── package.json       # 项目配置文件
└── package-lock.json  # 依赖版本锁定文件

public和src。并且分别在两个目录下面新建index.html和main.js。前者的内容：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue2 NPM示例</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

后者：

javascript 复制代码

// 导入Vue
import Vue from 'vue';

// 创建Vue实例
new Vue({
    el: '#app',
    // render函数用于渲染页面
    render: h => h({
        template: `
            <div>
                <h1>{{ message }}</h1>
                <p>当前时间: {{ currentTime }}</p>
            </div>
        `,
        data() {
            return {
                message: 'Hello Vue2 (NPM安装)',
                currentTime: new Date().toLocaleString()
            }
        }
    })
});

其次我们通过npm安装相关webpack相关依赖：

bash 复制代码

# 安装开发依赖
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader vue-template-compiler css-loader style-loader --save-dev

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

javascript 复制代码

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

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.vue$/, loader: 'vue-loader' },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new VueLoaderPlugin()
    ],
    devServer: {
        port: 8080,
        open: true
    }
};

在package.json中的scripts部分添加：

javascript 复制代码

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },

(增加的是上面字段中的最下面两行）

然后就可以运行项目了：

bash 复制代码

npm run dev

结果不出意外的报错了：

$webpack-cli\] Failed to load '/home/quyu/Projects/vue-npm-demo/webpack.config.js' config \[webpack-cli\] Error: Cannot find module 'vue-loader/lib/plugin'$

呵呵呵呵，简单分析一下怎么回事：

感觉是没找到组件的缘故，在百度里面搜了一下后一个报错，发现Vue2应该装对应版本的vue-loader：

bash 复制代码

npm install vue-loader@15.9.7 --save-dev

结果报了另一个错：

$webpack-cli\] Failed to load '/home/quyu/Projects/vue-npm-demo/webpack.config.js' config \[webpack-cli\] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'$

搜了一下，可能是因为webpack的版本问题，选了一种容易的方法：

有时候，简单地清理 node_modules 目录和缓存可以解决问题。你可以使用以下命令来做到这一点：

bash 复制代码

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

神奇地发现不报错了！但是又有了一个新的问题，打开的页面里面什么都没显示！按照上面的教程，运行结果应该是：

浏览器会自动打开http://localhost:8080

页面显示"Hello Vue2 (NPM安装)"和当前时间

修改代码后页面会自动刷新（热重载）

看一下开发者工具，原来有个报错：

vue.runtime.esm.js:4674 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.

解决方法也很简单，例如这里说的：【Vue】You are using the runtime-only build of Vue where the template compiler is not available.-CSDN博客

在main.js文件中，将import Vue from 'vue'改为import Vue from 'vue/dist/vue.esm.js'。这个版本中包含了模板编译器，可以直接使用Vue的模板功能。

这么改就解决问题了，可以看到当前时间。本来觉得那个教程总结得挺好的，谁想还是各种问题。今天就简单总结这么多。