Vuejs實例-01使用vue-cli腳手架搭建Vue.js項目

時間 2019-11-15

標籤 vuejs 實例使用 vue cli 腳手架搭建 vue.js 項目欄目 JavaScript 简体版

原文原文鏈接

目錄css

1. 前言

vue-cli 一個簡單的構建Vue.js項目的命令行界面html

總體過程：vue

$ npm install -g vue-cli 
$ vue init webpack vue-element-admin 
$ cd vue-element-admin 
$ npm install 
$ npm run dev

後面分步說明。webpack

2. 安裝

前提條件，Node.js >=4.x版本，建議使用6.x版本。npm版本 > 3.x
全局安裝vue-cligit

$ npm install -g vue-cli

...
github

3. 使用

$ vue init <template-name> <project-name>

vue官方提供了多個打包工具版本的模版。咱們能夠使用vue list命令查看，當前能夠使用的模版。web

$ vue list

咱們在這裏，使用webpack模版。功能齊全的webpack& vue-loader 提供熱加載、代碼檢查、單元測試和css分離vue-cli

$ vue init webpack vue-element-admin

以後，在E：\project文件夾下面，會有剛初始化的構建的項目vue-element-adminnpm

4. 運行結果

項目基礎結構已經搭建好了，如今來啓動它。
進入項目文件:json

$ cd vue-element-admin

安裝依賴：

中國行情緣由，直接安裝，有時候會失敗。咱們通常使用npm的淘寶鏡像cnpm。
先安裝cnpm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

以後，使用:

$ cnpm install

你直接安裝也能夠的：

$ npm install

運行：

$ npm run dev

啓動以後，自動打開默認瀏覽器

以後，就能夠進行本地開發，實時預覽開發效果。

5. 打包部署

項目開發完成以後，能夠使用npm run build進行打包工做

$ npm run build

打包完成以後，會生成dist文件夾，項目上線時候，只須要將dist文件夾放到服務器就好了。

6. 項目結構

vue-element-admin:             項目名稱 
|   .babelrc                   babel的配置文件 
|   .editorconfig              編輯器的配置文件 
|   .gitignore                 git的忽略文件 
|   .postcssrc.js              編譯css的工具 
|   index.html                 網站主頁 
|   package.json               項目依賴哪些包的文件 
|   README.md                  說明文檔 
|  
+---build                      構建的配置文件夾 
|       build.js               項目構建配置入口
|       check-versions.js
|       dev-client.js
|       dev-server.js
|       utils.js
|       vue-loader.conf.js
|       webpack.base.conf.js
|       webpack.dev.conf.js
|       webpack.prod.conf.js
|       webpack.test.conf.js
|      
+---config                      總體的配置文件夾
|       dev.env.js
|       index.js                配置文件入口
|       prod.env.js
|       test.env.js
|      
+---src                         源文件夾
|   |   App.vue                 佈局組件
|   |   main.js                 入口文件
|   |  
|   +---assets                  靜態文件夾
|   |       logo.png
|   |      
|   +---components              組件文件夾
|   |       Hello.vue           單個組件
|   |      
|   \---router                  路由文件夾
|           index.js            路由主頁
|          
+---static                      靜態文件夾
|       .gitkeep                空文件（Git自己不容許全空目錄提交至版本庫，一個辦法是在目錄下建立一個文件，取名爲.gitkeep是習慣用法）
|      
\---test                        測試文件夾