檢測 NodeJS 環境及 cnpm
安裝 vue-cli
# 安裝 vue-cli cnpm install vue-cli -g # 測試是否成功 # 查看可以基於哪些模板創建 vue 應用程序，通常我們選擇 webpack vue list
第一個 vue-cli 應用程序
- 創建一個 vue 項目，並使用管理員模式在 DOS 窗口進入該目錄
- 創建一個基於 webpack 模板的 vue 應用程序
# 這裏的 myvue 是項目名稱,可以根據自己的需求起名 vue init webpack myvue
初始化並運行
# 進入到vue項目目錄 cd myvue # 安裝依賴 npm install # 運行項目 npm run dev- 安裝依賴
- 運行項目
在 IDEA Open 項目
- 使用 IDEA 方便我們查看項目結構
安裝 Webpack
- Webpack 是一款模塊加載兼打包工具，它能把各種資源，如：JS、JSX、ES6、SASS、LESS、圖片等都作爲模塊來處理和使用
# 安裝 npm install webpack -g npm install webpack-cli -g# 測試安裝 webpack -v webpack-cli -v
使用Webpack
- IDEA Open 一個空項目
- 創建要給名爲 modules 的目錄，用於放置 JS 模塊等資源文件
- 在 modules 下創建模塊文件，如：hello.js，用於編寫 JS 模塊相關代碼
// 暴露一個方法 exports.sayHi = function () { document.write("<h1>FutureLL, ES6 規範</h1>"); };- 在 modules 下創建一個名爲 main.js 的入口文件，用於打包時設置 entry 屬性
// 接收一個方法 var hello = require("./hello"); hello.sayHi();- 在項目目錄下創建 webpack.config.js 配置文件，使用 webpack 命令打包
module.exports = { entry: './modules/main.js', output: { filename: "./js/bundle.js" } }打包項目
F:\IDEA\vue\webpack-study>webpack Hash: f3f86b22d65a2587a0b3 Version: webpack 4.43.0 Time: 344ms Built at: 2020/06/10 上午10:37:05 Asset Size Chunks Chunk Names ./js/bundle.js 1 KiB 0 [emitted] main Entrypoint main = ./js/bundle.js [0] ./modules/main.js 72 bytes {0} [built] [1] ./modules/hello.js 110 bytes {0} [built] WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/完成之後發現項目多了一個 dist 目錄
將打包後的包導入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="dist/js/bundle.js"></script> </body> </html>在此頁面打開瀏覽器，查看是否輸出相關內容
安裝 vue-router
- vue-router 是一個插件包，所以我們需要使用 cnpm/npm 來進行安裝，打開命令行工具，進入項目目錄，輸入如下命令：
npm install vue-router --save-dev- 如果在一個模塊化工程中使用它，必須通過 Vue.use() 明確的安裝路由功能：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter);
測試
- 刪除項目中沒有用的東西
- src中沒用的東西
- 在 components 目錄下存放自己編寫的組件
- 定義一個 Content.vue 和 Main.vue 的組件
- 安裝路由，在 src 目錄下，新建一個文件夾：router 專門用於存放路由
- 在 main.js 中配置路由
- 在 App.vue 中使用路由
