vue里搭建工程流程
1. 前言
vue-cli 一個(gè)簡(jiǎn)單的構(gòu)建Vue.js項(xiàng)目的命令行界面
整體過程:
$ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev后面分步說明。
2. 安裝
前提條件,Node.js >=4.x版本,建議使用6.x版本。npm版本 > 3.x
全局安裝vue-cli
$ npm install -g vue-cli3. 使用
$ vue init <template-name> <project-name>vue官方提供了多個(gè)打包工具版本的模版。我們可以使用vue list命令查看,當(dāng)前可以使用的模版。
$ vue list
我們?cè)谶@里,使用webpack模版。 功能齊全的webpack & vue-loader 提供熱加載、代碼檢查、單元測(cè)試和css分離
$ vue init webpack vue-element-admin之后,在E:\project文件夾下面,會(huì)有剛初始化的構(gòu)建的項(xiàng)目vue-element-admin
4. 運(yùn)行結(jié)果
項(xiàng)目基礎(chǔ)結(jié)構(gòu)已經(jīng)搭建好了,現(xiàn)在來啟動(dòng)它。
進(jìn)入項(xiàng)目文件:
$ cd vue-element-admin安裝依賴:
中國(guó)行情原因,直接安裝,有時(shí)候會(huì)失敗。我們一般使用npm的淘寶鏡像cnpm。
先安裝cnpm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org之后,使用:
$ cnpm install你直接安裝也可以的:
$ npm install運(yùn)行:
$ npm run dev啟動(dòng)之后,自動(dòng)打開默認(rèn)瀏覽器
之后,就可以進(jìn)行本地開發(fā),實(shí)時(shí)預(yù)覽開發(fā)效果。
5. 打包部署
項(xiàng)目開發(fā)完成之后,可以使用npm run build進(jìn)行打包工作
$ npm run build打包完成之后,會(huì)生成dist文件夾,項(xiàng)目上線時(shí)候,只需要將dist文件夾放到服務(wù)器就行了。
6. 項(xiàng)目結(jié)構(gòu)
轉(zhuǎn)載于:https://www.cnblogs.com/qcl-524077/articles/9234885.html
總結(jié)
以上是生活随笔為你收集整理的vue里搭建工程流程的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 2018最炙手可热的行业--大数据就业方
- 下一篇: 金融风控相关的知识点