在Ubuntu上安装并使用Vue2的基本教程
我也准备要尝试一些前端开发了！发现网上有些教程写得挺好，但是还是有点老（并且有点错误），所以这里更新一下：
主要参考了这篇教程：Vue2——1. 安装教程_vue2 cdn-CSDN博客
并且使用NPM方式进行安装：
上面教程中提到，访问node.js官网：https://nodejs.org/zh-cn/download 然后就可以看到不同的安装方式。除了这些，在ubuntu上还可以这样安装：
sudo apt-get update
sudo apt-get install nodejs npm然后再运行：
node -v
npm -v就可以看到node.js和npm的版本，不是很新，但是应该是可以用的。
然后按照上面的教程：
# 创建项目文件夹
mkdir vue-npm-demo
# 进入项目文件夹
cd vue-npm-demo
# 初始化项目（创建package.json文件）
npm init -y就可以看到在文件夹下生成了package.json文件。然后运行：
npm install vue@2.7.16 --save和上面那个链接教程不一样，我这里安装的是Vue2的最终版。然后可以看到文件夹下面多了node_modules和package-lock.json两个文件夹。（--save参数表示将Vue添加到项目依赖中，会在package.json文件中记录。）
接下来按照这个目录结构创建两个文件夹：
vue-npm-demo/
├── node_modules/ # 依赖包目录
├── public/ # 静态文件目录
│ └── index.html # 入口HTML文件
├── src/ # 源代码目录
│ └── main.js # 入口JavaScript文件
├── package.json # 项目配置文件
└── package-lock.json # 依赖版本锁定文件public和src。并且分别在两个目录下面新建index.html和main.js。前者的内容：
<!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>后者：
// 导入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相关依赖：
# 安装开发依赖
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文件：
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部分添加：
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack serve --mode development","build": "webpack --mode production"},(增加的是上面字段中的最下面两行）
然后就可以运行项目了：
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：
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 目录和缓存可以解决问题。你可以使用以下命令来做到这一点：
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的模板功能。
这么改就解决问题了，可以看到当前时间。本来觉得那个教程总结得挺好的，谁想还是各种问题。今天就简单总结这么多。