從零開始開發(fā)vue項(xiàng)目
很多人想學(xué)習(xí)分離式開發(fā)(我也不不知道名詞對不對)無從下手，npm，vue，nodejs，還有各種名字，運(yùn)行環(huán)境，如何安裝，如何配置各種各樣的問題出現(xiàn)。腦袋都漲了也沒有搞懂，沒有 系統(tǒng)性的交費(fèi)學(xué)習(xí) 過是要走很多彎路了，這也是沒有辦法的。接下來，我們直接做一個(gè) vue-admin 的項(xiàng)目來直接上手認(rèn)識這種分離式的開發(fā)，排版，還有就收這種 nodejs 到底是怎么玩的。
接下來，我們一起開始學(xué)習(xí)把。
注意：vue 與 vue-cli 的版本，文章有待更新，只做參考，需要一起學(xué)習(xí)可以進(jìn)Q群：687361645
文章來源地址http://www.zghlxwxcb.cn/article/142.html
前置要求
1、安裝 nodejs ,去 nodejs 官網(wǎng)下載安裝即可
輸入 node -v 和 npm -v，查看版本號，顯示即安裝成功
文章來源：http://www.zghlxwxcb.cn/article/142.html
2、安裝代碼編輯器 Visual Studio
3、使用 vsCode 自帶的命令行工具 或者 使用 Git
初始化項(xiàng)目 或者 創(chuàng)建項(xiàng)目
1、通過以下命令初始化項(xiàng)目
運(yùn)行命令生成一個(gè)配置文件 package.json
npm init -y
2、安裝打包工具 webpack
需要安裝 webpack 和 webpack cli
npm install -D webpack webpack-cli
如果安裝失敗，請逐個(gè)安裝
npm install --save-dev webpack npm install --save-dev webpack-cli
3、創(chuàng)建項(xiàng)目入口
1、創(chuàng)建 index.html 文件
2、新建 src 文件夾，創(chuàng)建 main.js，作為項(xiàng)目總?cè)肟谖募?/h3>
main.js 作用：
1、創(chuàng)建 vue 根示例，就是類似于導(dǎo)入初始文件
2、掛載 App組件，就是引入你需要的公共模塊
3、index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-admin</title> </head> <body> <div id="app"></div> </body> </html>
4、main.js
// 從vue包中導(dǎo)入vue對象
import Vue from 'vue'
new Vue({
el: '#app'
})5、具體完成后的目錄結(jié)構(gòu)
vue-admin ├─ package-lock.json ├─ package.json ├─ pubilc │ ├─ favicon.ico │ └─ index.html └─ src └─ main.js
持續(xù)更新中.....
到此這篇關(guān)于如何從零開始開發(fā)自己的vue項(xiàng)目,從零開始打造自己第一個(gè)工程化的前端項(xiàng)目,vue-admin項(xiàng)目？的文章就介紹到這了,更多相關(guān)內(nèi)容可以在右上角搜索或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
