Vue2.x-03使用vue-cli搭建Vue開發環境
阿新 • • 發佈:2018-12-16
文章目錄
概述
腳手架 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-[email protected]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-[email protected] 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 <[email protected]***.com>
? License MIT
? Use sass? No
vue-cli · Generated "vue-todos".
To get started:
cd vue-todos
npm install
npm run dev
輸入的問題,直接“回車”跳過就行了
npm i安裝腳手架專案的基本支援包
進入專案目錄,
C:\Users\yangshangwei>cd vue-todos
安裝腳手架專案的基本支援包
C:\Users\yangshangwei\vue-todos>npm i
npm WARN deprecated [email protected]1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
> uglifyjs-webpack-[email protected]0.4.6 postinstall C:\Users\yangshangwei\vue-todos\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]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-[email protected]1.0.0 dev C:\Users\yangshangwei\vue-todos
> cross-env NODE_ENV=development webpack-dev-server --open --hot
Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
工程結構
我們匯入工程到IDE中,看看 vue-cli 為我們構造了 一個什麼樣的程式碼結構