文章目錄

• 概述
• 安裝npm
• 安裝vue-cli
• 建立工程
• npm i安裝腳手架項目的基本支持包
• npm run dev運行由腳手架構建的基本 Vue.js 程序
• 工程結構

概述

腳手架 vue-cli為我們省去了手工配置開發環境、運行環境和測試環境的步驟，可以讓我們直接步入 Vue.js 開發，不過我們需要先搭建下環境，下面開始吧

---

安裝npm

npm（node package manager）node的包管理工具,網上很多教程，這里不贅述了。

安裝成功后，驗證如下：

---

安裝vue-cli

使用npm i vue-cli -g將 vue-cli 安裝到機器的全局環境中

C:\Users\yangshangwei>npm i vue-cli -g npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) C:\Users\yangshangwei\AppData\Roaming\npm\vue -> C:\Users\yangshangwei\AppData\Roaming\npm\node_modules\vue-cli\bin\vue C:\Users\yangshangwei\AppData\Roaming\npm\vue-init -> C:\Users\yangshangwei\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init C:\Users\yangshangwei\AppData\Roaming\npm\vue-list -> C:\Users\yangshangwei\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list + vue-cli@2.9.6 added 239 packages from 206 contributors in 23.127s

查看vue的版本

C:\Users\yangshangwei>vue --version 2.9.6

---

建立工程

這里我們用的是webpack-simple模板 ，它擁有基礎功能的 webpack + vue-loader 用于快速原型開發。

還有一套最常用的是webpack，它擁有高級功能的 webpack + vue-loader 用于正式開發：

vue init webpack-simple vue-todos C:\Users\yangshangwei>vue init webpack-simple vue-todos? Project name vue-todos ? Project description A Vue.js project ? Author yangshangwei <yangshangwei@***.com> ? License MIT ? Use sass? Novue-cli · Generated "vue-todos".To get started:cd vue-todosnpm installnpm run dev

輸入的問題，直接“回車”跳過就行了

---

npm i安裝腳手架項目的基本支持包

進入項目目錄，

C:\Users\yangshangwei>cd vue-todos

安裝腳手架項目的基本支持包

C:\Users\yangshangwei\vue-todos>npm i npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.> uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\yangshangwei\vue-todos\node_modules\uglifyjs-webpack-plugin > node lib/post_install.jsnpm notice created a lockfile as package-lock.json. You should commit this file. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})added 802 packages from 570 contributors in 39.189s

---

npm run dev運行由腳手架構建的基本 Vue.js 程序

C:\Users\yangshangwei\vue-todos>npm run dev> vue-todos@1.0.0 dev C:\Users\yangshangwei\vue-todos > cross-env NODE_ENV=development webpack-dev-server --open --hotProject is running at http://localhost:8080/ webpack output is served from /dist/ 404s will fallback to /index.html

訪問 http://localhost:8080/

---

工程結構

我們導入工程到IDE中，看看 vue-cli 為我們構造了 一個什么樣的代碼結構

---

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Vue2.x-03使用vue-cli搭建Vue开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。