環境

1、node -v 檢測
? ? ? 沒有就下載node，裝到C盤 ? ? ? ? ? http://nodejs.cn/download/ ? ? ?
2、vue -v 檢測?
? ? ? 沒有就 npm install -g @vue/cli 或者 yarn global add @vue/cli ? 安裝腳手架
? ? ? ?網址 https://cli.vuejs.org/zh/ ?也可以從網址里找到安裝命令
3、之后就可以使用vue ui 或者 vue create 項目名稱——創建項目（建議vue ui，看著方便）

?

?

?

?

?圖片中省略的部分就是不用設置

4、之后就可以npm run serve 打開項目了（要在項目這個文件夾中使用指令）

##?包管理工具??（包等于插件vue，echars）

?npm

npm?是nodejs軟件自帶的一個包管理工具，由于是外國人寫的，它默認下載文件的地址是國外的，所以很慢，修改成國內的下載地址?npm淘寶鏡像

檢測：`npm?config?get?registry`

?yarn

安裝：https://yarn.bootcss.com/docs/

yarn?必須基于nodejs運行。屬于第三方的下載包的管理器

優點：比npm快很多?

【注意】兩者只能用一個，下載依賴的時候只能用一個，啟動項目或打包的時候沒有區別。

###?npm和yarn?的常用命令

####?初始化安裝依賴

項目里必須由package.json文件

-?yarn?install

-?npm?i?`#`?install縮寫?i

-??從線上拿到的項目沒有node_modules包，就需要初始化

【注意】cmd窗口如果停止下載了。鼠標點擊窗口敲回車

####?初始化npm環境

-?npm?init?-y

####?安裝依賴

-?npm?i?pageName

-?yarn?add?packName

###?卸載包

-?npm?uninstall?packName

-?yarn?remove?packName

?

###?依賴包的環境

環境===?范圍===?作用域

全局安裝依賴的命令

####?全局環境

舉例`?npm?i?-?g?jquery`

####?開發環境???npm?run?serve

編譯scss的，編譯es6的babel，編譯vue文件的loader僅僅用于開發環境，瀏覽器里是用不到的，我們使用-?`D`安裝

舉例：`npm?i?-D?scss?scss-loader`

####?生產環境???npm?run?build

-?`S`表示生產環境

vue,jquery,axios,ajax等都是運行在瀏覽器中的，需要

?

##?項目創建

nodejs+vue+cli環境準備好了后，可以創建項目了

###?使用圖形化創建

`vue?ui`

###?使用命令行創建

`vue?create?name`

?

###?安裝scss

npm?i?-D?sass?sass-loader

yarn??add?-D?sass?sass-loader

//?卸載
npm?uninstall?--save?sass-loader
//?安裝
npm?install?-D?sass-loader@7.x
?

?

#?項目結構

-?node_modules?項目運行時需要的所有依賴（可以刪除，只要有package.json就可以重置）

-?public?公共目錄，打包的時候就原格式輸出，里面存放的是單頁面html和網站的icon

-?src?【重要】

??源碼，必要的文件main.js，是入口文件，全局文件，項目運行是執行的第一個文件

-?package.json【重要】

??運行命令和所有依賴清單文件

-?gitignore?過濾git儲存的清單，不想讓某個文件存入git倉庫，就把他寫在清單里

-?bable.config.js?把es6語法編譯成es5?

-?README.md?項目描述文件

-?vue.config.js?對當前項目vue腳手架的擴展

??功能：打包的二級目錄?，利用nodejs做跨域請求proxy，關閉打包時的代碼映射文件

總結

以上是生活随笔為你收集整理的vue 前期准备，项目结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。