vue是當前比較流行的前端框架之一,被很多大公司所使用,學會使用它將會使我們的前端開發變得更加高效。這裡簡單介紹一下通過vue-cli(俗稱「腳手架」)建立vue專案的步驟。在電腦上安裝nodejs.
檢查node和npm的版本,更新npm版本
使用**npm映象,cnpmnode -v //檢視node版本
npm -v //檢視npm版本
//如果不是最新版本,可以執行如下指令
npm install -g npm
安裝vue-cli,有了這個才能建立vue基本專案//當npm速度很慢時,可以考慮使用cnpm命令安裝模組
//安裝cnpm的指令
npm install -g cnpm --registry=
按照步驟一搭建完環境之後就可以開始建立專案了cnpm install vue-cli -g //全域性安裝vue-cli
vue list //檢查vue-cli是否安裝成功
開啟命令列,進入要建立專案的資料夾
命令列輸入如下命令
進行一些選擇//在當前資料夾下生成該專案名稱的vue專案資料夾
vue init webpack "專案名稱"
輸入命令後會出現一系列的選項,是關於vue專案的一些配置,推薦使用如下選擇
這樣乙個vue基礎專案就建立完畢啦。'git' �����ڲ����ⲿ���ҳ���ǿ����еij���
�������ļ�
? project name myvue
? project description my first vue project
? vue build standalone
? install vue-router? yes
? use eslint to lint your code? no //以下三處選擇no會避免一些警告
? set up unit tests no
? setup e2e tests with nightwatch? no
? should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · generated "myvue".
專案建立完畢後就可以用開發工具開啟進行開發了,那麼如何在開發狀態下檢視執行效果呢?
方法如下,以下命令需要進入專案資料夾後操作
首先安裝依賴,一些和執行專案相關的依賴通過這個命令安裝
npm install //安裝依賴有時候不成功可以換成cnpm或者再試一遍
啟動專案
npm run dev //這樣就可以啟動了
build //構建相關
config //配置相關,啟動埠號等配置
src //編寫的原始碼
assets //存放一些資源
components //存放元件(vue檔案),主要開發的地方
static //靜態資源目錄,css,js,
當然,如果直接這樣打包部署後應該是訪問不了的。這裡有乙個坑,就是要修改專案config資料夾下index.js中的build的配置。將build中的assetspublicpath的值原本是"/",修改成"./",如下。修改之後打包就沒問題了。//打包生成dist資料夾,將這個資料夾直接部署到伺服器上即可
npm run build
build: {
// template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// paths
assetsroot: path.resolve(__dirname, '../dist'),
assetssubdirectory: 'static',
assetspublicpath: './',
......
vue cli 建立快速 vue 專案
注意這安裝的是 vue cli2 版本的 vue 專案!雖然可以安裝,但是就目前而言並不適用!一般現在都用vue cli 3 1.首相你需要先有 node.js 使用node v npm v 去查詢自己是否安裝好 2.由於使用npm 下包很慢,因為是國際的問題,所以我們可以使用國內的 映象 映象安裝...
vue使用vue cli建立專案
安裝執行環境 node和npm 安裝vue cli 檢視是否安裝成功vue v 安裝webpack 新建專案 1 vue init webpack 專案名稱 2 配置專案有關的資訊 專案名稱,開發者,描述,安裝路由,使用eslint 規範,測試單元 4 進入專案的資料夾下,使用npm run dev...
利用vue cli建立Vue專案
配置參考 2.基於node.js,利用 npm映象安裝相關依賴。在cmd裡直接輸入 npm install g cnpm registry 回車,等待安裝.注意 確保npm版本大於等於3.0.0,否則後續安裝會出現問題 3.安裝全域性vue cli腳手架,用於幫助搭建所需的模板框架。在cmd裡 1 ...