一：在普通網頁中使用 vue
- 使用 script 標簽，引入 vue 包
- 在 ndex 頁面中，創建一個 id 為 App 的 div 容器
- 通過 new Vue 得到一個 vue 實例
二：在 webpack 中使用 vue
執行命令 ： npm i vue -S 把 vue 包安裝成項目運行依賴
main.js：
//入口文件 //如何在 webpack 構架的項目中，使用 Vue 進行開發 // 執行命令 npm i vue -s ,把 vue 包安裝成項目運行依賴 //在 webpack 中嘗試使用 Vue； //注意：在 webpack 中，使用 import Vue from ‘vue’ 導入的 Vue 構造函數，功能不全，只提供了 runtime-only 的方式，並沒有提供像網頁中那樣的使用方法，實際導入的包是根據包的查找規則導入的 import Vue from 'vue' // 這種方法要在 webpack.config.js 中添加別名指定（修改導入 Vue 包的路徑） // import Vue from '../node_modules/vue/dist/vue.js'//這樣是可以的，也可以使用像網頁那種使用方法了，不用再 webpack.config.js 中添加別名 alias 了； //包的查找規則： // 1：找項目根目錄中有沒有 node_modules 的文件夾 // 2：在 node_modules 中根據包名找對應的 vue 文件夾 // 3：在 vue 文件夾中找一個叫做 package.json 的包配置文件 // 4：在package.json 文件中查找一個 main 屬性【 main 屬性指定了這個包在被加載時候的入口文件】 var vm = new Vue({ el:'#app', data:{ msg: '123' } });
webpack.config.js：（添加 resolve 節點）
const path = require('path') //node操作URL要用path模塊 //導入在內存中生成html頁面的插件 //只要是插件都要放到plugin節點中去 const htmlWebpackPlugin = require('html-webpack-plugin') //node語法 //這個配置文件就是一個js文件，通過node中的模塊操作，向外暴露了一個配置對象 module.exports = { //在配置文件中需要主動指定入口和出口 entry:path.join(__dirname,'./src/main.js'),//入口，表示webpack要打包那個文件 output:{//輸出文件相關配置 path:path.join(__dirname,'./dist'),//指定，打包好的文件，輸出到那個目錄中去 filename: 'bundle.js'//指定輸出文件名稱 }, plugins: [//配置插件的節點 new htmlWebpackPlugin({//創建一個在內存中生成HTML頁面的插件 template: path.join(__dirname,'./src/index.html'),//指定模板頁面，將會根據指定的頁面路徑，去生成內存中的頁面 filename: 'index.html',//指定生成的頁面的名稱 }) ], module:{//這個節點，用於配置所有第三方模塊加載器 rules:[//所有第三方模塊的匹配規則 { test:/\.css$/, use:['style-loader','css-loader'] }, //配置處理.css文件的第三方loader規則 { test:/\.scss$/, use:['style-loader','css-loader','sass-loader'] }, //配置.scss文件的第三方loader規則 { test:/\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=6000&name=[name].[ext]'}, { test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ } //配置 babel 轉化ES6 語法 ] }, resolve: { alias:{//修改 Vue 被導入時候的包的路徑 "vue$":"vue/dist/vue.js" } } }
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--這時容器-->
<div id="app">
<p>{{msg}}</p>
</div>
</body>
</html>
如果不在 webpack.config.js 中添加 resolve 節點，它真實尋找的路徑文件：
首先報錯：
真實尋找路徑文件為 node_modules/vue/package.json 文件中有一個為 main 的屬性，其屬性值即實際import真實引入的 js 文件
