vue cli建立vue專案基本步驟

vue是當前比較流行的前端框架之一，被很多大公司所使用，學會使用它將會使我們的前端開發變得更加高效。這裡簡單介紹一下通過vue-cli(俗稱「腳手架」)建立vue專案的步驟。

在電腦上安裝nodejs.

檢查node和npm的版本，更新npm版本

node -v //檢視node版本 npm -v //檢視npm版本 //如果不是最新版本，可以執行如下指令

npm install -g npm

使用**npm映象，cnpm

//當npm速度很慢時，可以考慮使用cnpm命令安裝模組 //安裝cnpm的指令

npm install -g cnpm --registry=

安裝vue-cli，有了這個才能建立vue基本專案

cnpm install vue-cli -g //全域性安裝vue-cli

vue list //檢查vue-cli是否安裝成功

按照步驟一搭建完環境之後就可以開始建立專案了

開啟命令列，進入要建立專案的資料夾

命令列輸入如下命令

//在當前資料夾下生成該專案名稱的vue專案資料夾

vue init webpack "專案名稱"

進行一些選擇

輸入命令後會出現一系列的選項，是關於vue專案的一些配置，推薦使用如下選擇

'git' ��ڲ��ⲿ��ҳ��ǿ��еĳ�� ļ� ? 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".

這樣乙個vue基礎專案就建立完畢啦。

專案建立完畢後就可以用開發工具開啟進行開發了，那麼如何在開發狀態下檢視執行效果呢?

方法如下，以下命令需要進入專案資料夾後操作

首先安裝依賴，一些和執行專案相關的依賴通過這個命令安裝

npm install //安裝依賴有時候不成功可以換成cnpm或者再試一遍

啟動專案

npm run dev //這樣就可以啟動了

build   //構建相關
config //配置相關，啟動埠號等配置
src //編寫的原始碼
assets //存放一些資源
components //存放元件(vue檔案),主要開發的地方
static //靜態資源目錄，css,js,

//打包生成dist資料夾，將這個資料夾直接部署到伺服器上即可

npm run build

當然，如果直接這樣打包部署後應該是訪問不了的。這裡有乙個坑，就是要修改專案config資料夾下index.js中的build的配置。將build中的assetspublicpath的值原本是"/",修改成"./"，如下。修改之後打包就沒問題了。

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 cli 建立快速 vue 專案

vue使用vue cli建立專案

利用vue cli建立Vue專案

vue cli建立vue專案基本步驟

vue cli 建立快速 vue 專案

vue使用vue cli建立專案

利用vue cli建立Vue專案

相關推薦