vue-cli創建vue項目基本步驟

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

一、環境搭建

1. 在電腦上安裝nodejs.
2. 檢查node和npm的版本，更新npm版本

node -v //查看node版本 
npm -v  //查看npm版本
//如果不是最新版本，可以運行如下指令
npm install -g npm

3. 使用淘寶npm鏡像，cnpm

//當npm速度很慢時，可以考慮使用cnpm命令安裝模塊
//安裝cnpm的指令
npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

4. 安裝vue-cli，有了這個才能創建vue基本項目

cnpm install vue-cli -g //全局安裝vue-cli
vue list    //檢查vue-cli是否安裝成功

二、創建項目

按照步驟一搭建完環境之后就可以開始創建項目了

1. 打開命令行，進入要創建項目的文件夾
2. 命令行輸入如下命令

//在當前文件夾下生成該項目名稱的vue項目文件夾
vue init webpack "項目名稱"

3. 進行一些選擇
   輸入命令后會出現一系列的選項，是關於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".

這樣一個vue基礎項目就創建完畢啦。

三、開發和運行

項目創建完畢后就可以用開發工具打開進行開發了，那么如何在開發狀態下查看運行效果呢?
方法如下，以下命令需要進入項目文件夾后操作

1. 首先安裝依賴，一些和運行項目相關的依賴通過這個命令安裝

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

2. 啟動項目

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

四、目錄結構

build   //構建相關
config  //配置相關，啟動端口號等配置
node_modules    //下載的模塊
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: './',
    ......