開發(fā) Vue 前端項(xiàng)目的準(zhǔn)備工作
本文基于node -v (v13.12.0)vue -V (@vue/cli 4.2.3)
一、安裝node.js
nodejs 是一個基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。其中包括:npm 模塊管理工具 和webpack 前端代碼打包工具。
https://nodejs.org/zh-cn/
二、全局安裝 vue-cli 腳手架?打開cmd命令行,使用node.js中的npm 命令進(jìn)行安裝,代碼如下,“-g”表示全局安裝。
(1)npm install -g @vue/cli?
安裝Vue腳手架
由于npm下載包一般很慢,更換為淘寶鏡像源,后再安裝,如下兩條命令。?
(1)npm install -g cnpm --registry=https://registry.npm.taobao.org?
(2)cnpm install -g @vue/cli (其中-g 表示全局安裝)
三、創(chuàng)建 Vue 項(xiàng)目?可以采取圖形化或命令行兩種方式創(chuàng)建 vue 開發(fā)項(xiàng)目模板,創(chuàng)建過程中根據(jù)需要選擇安裝一些功能。
1.圖形化方式(vue-cli 腳手架自帶了一個圖形化項(xiàng)目創(chuàng)建工具)?
vue ui?
2.命令行方式?
vue create projectName
四、項(xiàng)目目錄結(jié)構(gòu)
目錄:node_modules
目錄:public
目錄:src/assets; src/components;src/store.
文件:App.vue
文件:main.js
文件:jshintrc.js
文件:babel.config.js
文件:package-lock.json
文件:package.json?
五、編譯并啟動項(xiàng)目
npm run serve