vue cli腳手架快速構建專案

最近做乙個專案，想要專案前後端分離，所以想到以前學過的vue,所以決定使用vue做前端(小聲bb幾句，我忘了怎麼初始化工程了)

（1）直接用這個適合單獨的h5頁面的使用

（2）命令列工具vue-cli

適合構建大型應用，配合npm，npm能很好的和webpack等模組打包器配合使用。

# 全域性安裝vue最新版

$ npm install vue

開啟命令列工具，輸入node -v，如果顯示node 版本號，則表示安裝成功。

注意：官網安裝的node.js後，就已經自帶包管理工具npm

原因：這一步也可以省略，安裝的理由是npm的伺服器是外國，有時候我們安裝依賴執行的操作超級慢，而cnpm 或是 yarn執行的速度較快，特別是在執行npm indstall時，**映象cnpm install和yarn相對比較明顯的快。

**映象安裝：

開啟命令列工具，輸入

npm install -g cnpm --registry=

安裝完後，通過cnpm -v檢視版本號來判斷是否安裝成功

yarn

參考官網教程yarn 安裝

# 全域性安裝

cnpm install -g vue-cli

同樣通過命令列工具使用vue -v檢視版本號判斷是否安裝成功

在乙個資料夾下面初始化來新建乙個工程專案，推薦使用git自帶git bash here

# vue init 是vue初始化專案 # project 是自定義的專案名稱

vue init webpack project

命令執行之後，會在當前目錄下生成乙個以project命名的專案資料夾。

命令執行時會顯示下列選項：

$ vue init webpack project--------------------- 安裝vue腳手架的命令，採用webpack打包工具，專案名是project this will install vue 2.x version of the template. ---------------------這裡說明將要建立乙個vue 2.x版本的專案 for vue 1.x use: vue init webpack#1.0 project ? project name (project) ---------------------專案名稱 ? project name project ? project description (a vue.js project) ---------------------專案描述 ? project description a vue.js project ? author wujy--------------------- 專案建立者 ? author wujy ? vue build (use arrow keys) ? vue build standalone ? install vue-router? (y/n) --------------------- 是否安裝vue路由，推薦安裝，是頁面跳轉用的 ? install vue-router? yes ? use eslint to lint your code? (y/n) n ---------------------是否啟用eslint檢測規則，這裡個人建議選no，因為這裡有很多的坑，具體以後會講 ? use eslint to lint your code? no ? setup unit tests with karma + mocha? (y/n) n ----------------是否安裝單元測試，因人而異，可以自行選擇 ? setup unit tests with karma + mocha? no ? setup e2e tests with nightwatch? (y/n) n --------------------是否安裝e2e測試，可自行選擇 ? setup e2e tests with nightwatch? no vue-cli · generated "project". to get started: --------------------- 這裡說明如何啟動這個服務 cd project --------------------進入專案資料夾 npm install ---------------------安裝依賴，推薦使用**映象cnpm

npm run dev -----------------------專案執行

執行上述操作之後，可以看到本地多了乙個project資料夾

# 執行專案 cd project ------------進入工程目錄 cnpm install -------------安裝依賴，如果要具體安裝其他模組可以單獨使用，具體以後講 # 執行之後，目錄裡多了乙個node_modules資料夾，這裡放的就是所有依賴的模組 cnpm run dev ------------執行專案 # 打包工作，用於正式環境

cnpm run build

本地localhost:8080就可以開啟乙個helloworld.vue，預設伺服器啟動的是8080埠，當然也可以通過更改配置來修改預設埠

build -------------------專案構建相關**（webpack配置） build.js -------------生產環境構建** check-versions.js ----------檢查node、npm等版本 utils.js ------------------------構建工具相關 vue-loader.conf.js ---------css載入器的配置 webpack.base.conf.js ---webpack的基礎配置資訊 webpack.dev.conf.js -----webpack開發環境配置資訊，構建開發本地伺服器 webpack.prod.conf.js ---wenpack生產環境配置資訊 config -------------------配置目錄，包括埠號，打包輸出等的vue基本配置檔案 dev.env.js -----------開發環境變數 prod.env.js -----------生產環境變數 index.js -------------專案的配置變數，埠號等 node_modules -----------載入的專案依賴模組 static -------------------靜態資源目錄 index.html ---------------首頁的入口檔案，可以新增meta等引數 readme.md ---------------專案的說明文件，makedown格式 src -----------------------原始碼目錄，主要的開發 assets ---------------靜態資源，css,image等可以存放 components -----------公共元件 router ---------------路由資料夾，配置頁面跳轉 views ----------------頁面編寫的地方，（可以自行定義命名） main.js ------------------入口檔案，全域性的配置和載入 .babelrc -----------------es6語法編譯配置，用來將es6**轉換成瀏覽器可識別的es5** .gitignore ---------------git上傳需要忽略的檔案的格式 package.json -------------專案的基本資訊，包括開發所需要的模組、專案名稱、版本號等 .postcssrc.js ------------轉換css的工具

.editorconfig ------------定義**格式

vue cli腳手架快速構建專案

vue cli腳手架建立專案

使用Vue cli腳手架工具構建Vue專案

快速搭建Vue cli腳手架工程

vue cli腳手架快速構建專案

vue cli腳手架建立專案

使用Vue cli腳手架工具構建Vue專案

快速搭建Vue cli腳手架工程

相關推薦