01.創(chuàng)建第一個(gè)vue-cli。這里用的是node.js。早上的時(shí)候，就需要把node.js安裝上去
02.node.js安裝
第一步.去官網(wǎng)下載node.js
https://nodejs.org/en
第二步.運(yùn)行官網(wǎng)下載的node.js的msi文件（記住所有的node.js文件的安裝包都是msi文件的形式），一直都是next。最后檢查是否安裝成功，使用windows+r 打開(kāi)cmd 運(yùn)行末班，輸入命令 node -s和 npm- v，如果出現(xiàn)結(jié)果的話，代表安裝成功。
第三步.安裝完成后，配置node.js
01.
安裝淘寶的加速器 ，命令就是
npm install cnpm -g
02.配置vue-cli，也是輸入命令行：
npm install -g @vue/cli
03.在D盤(pán)中，去new 一個(gè)新的文件夾，叫做vue_projects 在路徑上打開(kāi)cmd，輸入命令
vue init webpack myvue
因?yàn)樾枰獙W(xué)習(xí)相關(guān)的組件，所以選擇no。
04.運(yùn)行項(xiàng)目
cd myvue
npm install
npm run dev
“npm install” 是 Node Package Manager (npm) 的一個(gè)命令，用于在項(xiàng)目中安裝所需的依賴(lài)包。它會(huì)讀取項(xiàng)目目錄中的 “package.json” 文件，并從 npm registry 下載定義的依賴(lài)包。在項(xiàng)目中使用依賴(lài)包的代碼之前，通常需要先運(yùn)行 “npm install” 命令。
————————————————
版權(quán)聲明：本文為CSDN博主「Pella732」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42596246/article/details/129586384
在npm run dev的時(shí)候，首先會(huì)去項(xiàng)目的package.json文件里找scripts 里找對(duì)應(yīng)的 dev ，然后執(zhí)行 dev 的命令。
例如啟動(dòng)vue項(xiàng)目 npm run serve的時(shí)候，實(shí)際上就是執(zhí)行了vue-cli-service serve 這條命令。
05.修復(fù)項(xiàng)目
npm audit fix
06.在idea打開(kāi)
file----open
webpack
01.介紹webpack
02.安裝，相關(guān)的命令在cmd中去運(yùn)行
npm install webpack -g
npm install webpack-cli -g
03.創(chuàng)建項(xiàng)目，在項(xiàng)目中去用相關(guān)的功能
第一步：創(chuàng)建一個(gè)空項(xiàng)目，在vue-projects（我創(chuàng)建的vue項(xiàng)目的工作目錄），創(chuàng)建一個(gè)webpack-study文件夾
第二步.打開(kāi)idea。在file–>open中去打開(kāi)這個(gè)文件夾（名字是那個(gè)剛剛創(chuàng)建的文件夾，也就是webpack-study）
第三步.在idea中去創(chuàng)建一個(gè)modules的目錄（directory），寫(xiě)兩個(gè)js文件，一個(gè)叫做hello.js，一個(gè)叫做main.js
hello.js
exports.sayHi=function(){
document.write("<div>hello webpack </div>");
};
注解：exports關(guān)鍵字
module.exports 和 exports 是 Node.js 中的兩個(gè)關(guān)鍵字，用于導(dǎo)出模塊。
module.exports 是一個(gè)對(duì)象，可以用來(lái)導(dǎo)出模塊中的多個(gè)函數(shù)、變量等。
exports 是 module.exports 的一個(gè)快捷方式，可以直接導(dǎo)出單個(gè)函數(shù)或變量。
例如：
main.js
var hello =require("./hello");
hello.sayHi();
這個(gè)對(duì)象hello是接收hello.js。這個(gè)對(duì)象可以直接調(diào)用hello.js聲明的方法
注解：
JavaScript中的require是一個(gè)函數(shù)，用于在Node.js環(huán)境中加載模塊。它接受一個(gè)模塊路徑作為參數(shù)，并返回該模塊的導(dǎo)出對(duì)象。在瀏覽器中，require通常不可用，需要使用其他工具來(lái)實(shí)現(xiàn)模塊加載。
第四步.配置webpack.config.js文件
創(chuàng)建一個(gè)js文件：
其中的代碼是：
entry是入口
output是打包結(jié)果放在/js/bundle.js文件中
目錄結(jié)構(gòu)是：
第五步.打包
在控制臺(tái)中輸入webpack命令
第六步.idea自動(dòng)生成dist目錄
第七步.創(chuàng)建index.html
其中的代碼：
vue-router部分
01.先在項(xiàng)目中去安裝依賴(lài)
npm install vue-router --save-dev
npm run dev
02.創(chuàng)建組件content.vue和Main.vue
03.創(chuàng)建router目錄，并且創(chuàng)建一個(gè)index.js文件
index.js中的代碼：導(dǎo)入vue-router插件，導(dǎo)入一個(gè)自定義的組件content.vue和main.vue。
這里的component中組件的名字和import的對(duì)象名字是一樣的
04.在main.js（項(xiàng)目的入口）中去配置router
導(dǎo)入項(xiàng)目中的router文件夾下的index.js文件
在Vue對(duì)象中去導(dǎo)入router對(duì)象（這里的router和import的第一個(gè)router名字一樣）
05.在項(xiàng)目中的app.vue中去用router
app.vue的作用：
app.vue中不但可以當(dāng)做是網(wǎng)站首頁(yè)，也可以寫(xiě)所有頁(yè)面中公共需要的動(dòng)畫(huà)或者樣式。不在上面寫(xiě)代碼也可以。
app.vue是主組件，是頁(yè)面入口文件，是vue頁(yè)面資源的首加載項(xiàng)。所有的頁(yè)面都是在app.vue中進(jìn)行切換的?？梢岳斫鉃樗械穆酚啥际莂pp.vue的子組件。
elementUI部分
01.先創(chuàng)建相關(guān)的項(xiàng)目
vue init webpack hello-vue
注解：
用vue init命令來(lái)初始化項(xiàng)目，具體使用方法如下：
vue init <template-name> <project-name>
init：表示要用vue-cli來(lái)初始化項(xiàng)目
<template-name>：表示模板名稱(chēng)，vue-cli官方提供的5種模板：
1.webpack：一個(gè)全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測(cè)和CSS擴(kuò)展。
<project-name>：標(biāo)識(shí)項(xiàng)目名稱(chēng)，用戶(hù)根據(jù)自己的項(xiàng)目來(lái)起名字。
02.安裝相關(guān)的插件
cd hello -vue
npm install vue-router --save-dev
npm i element-ui -s
npm install
cnpm install sass-loader node-sass --save-dev
npm run dev
相關(guān)的組件，在elementUI官網(wǎng)可以看到。https://element.eleme.io/
03.在項(xiàng)目中創(chuàng)建一個(gè)views目錄
src中views存放相關(guān)的視圖組件
components存放相關(guān)的功能組件
router存放路由（也就是相關(guān)路徑跳轉(zhuǎn)的router）
04.在views中創(chuàng)建組件
以上代碼在elementUI中可以找到
05.在router文件中index.js完成views中的創(chuàng)建組件的路由注冊(cè)
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-577977.html
06.在項(xiàng)目的入口main.js和app.vue中去描寫(xiě)router
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-577977.html
到了這里，關(guān)于今天實(shí)習(xí)第三天，vue（vue-cli部分，webpack部分，vue-router部分，elementUI部分）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
