在創建舊版的Vue工程時,需要先下載Vue-CLI 2.x的版本。Vue-CLI是Vue.js官方提供的腳手架工具,可以幫助我們快速搭建Vue開發環境,然后進行開發和打包等工作。
下載并安裝Vue-CLI
npm install -g vue-cli@2.0
創建Vue項目
vue init webpack my-project-name
運行Vue項目
cd my-project-name npm install npm run dev
在創建項目的過程中,你需要輸入一些基本的配置信息,包括項目名稱、項目描述、作者、Vue的版本、ESLint的規范等。建議按需選擇。在運行Vue項目之前,需要先進行安裝依賴,這個過程需要一定的網絡連接速度,建議先備好網絡環境。
在創建完成項目之后,你會發現在項目的根目錄下生成了一些目錄和文件,包括src,build,config等目錄。src目錄是我們項目的主要開發目錄,需要添加我們的業務邏輯和組件等代碼,build和config目錄是一些構建工具和配置文件,不需要改動,如果需要自定義一些內容,可以經過學習后在上述目錄文件下進行拓展。
修改啟動端口號
//修改config目錄下的index.js文件 module.exports = { dev: { port: 8000, //由原來的8080改為8000 ... } }
引入Element-UI
//1.安裝Element-UI npm i --save element-ui //2.在main.js中全局引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
引入Axios
//1.安裝Axios npm install axios --save //2.在main.js中全局引入 import axios from 'axios' Vue.prototype.$axios = axios
以上就是使用Vue-CLI2.x版本創建舊版Vue項目的基本操作,可以按照上述方式來創建你的Vue工程,并在其中添加自己的代碼和組件等內容。如果需要進行打包等操作,可以在項目根目錄下執行以下命令:
npm run build
在dist目錄下生成了一個index.html和一個static目錄,其中index.html就是打包后的主文件,我們可以把整個dist目錄直接放到web服務器下面進行部署使用,或者用cordova等打包成App使用。