我也準備要嘗試一些前端開發了！發現網上有些教程寫得挺好，但是還是有點老（并且有點錯誤），所以這里更新一下：
主要參考了這篇教程：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的模板功能。
這么改就解決問題了，可以看到當前時間。本來覺得那個教程總結得挺好的，誰想還是各種問題。今天就簡單總結這么多。
——責任鏈模式)
