1.新建一個workspace,我這邊叫jayceevue;
2.用IDE打開這個workspace,我用的VSCode;
3.按住Ctrl+`,在終端TERMINAL中輸入
npm install -g vue-cli
運行結果如下:
Microsoft Windows [版本 10.0.17134.472]
(c) 2018 Microsoft Corporation。保留所有權利。
D:\jayceevue>npm install -g vue-cli
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\Alex\AppData\Roaming\npm\vue-init -> C:\Users\Alex\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\Alex\AppData\Roaming\npm\vue -> C:\Users\Alex\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\Alex\AppData\Roaming\npm\vue-list -> C:\Users\Alex\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ [email protected]
updated 1 package in 18.302s
4.Vue安裝好之後搭建腳手架,輸入
vue init webpack FaceWarrantWeb
FaceWarrantWeb是工程的名字
之後會讓你輸入項目名字,我這邊默認還是FaceWarrantWeb,回車即可
然後輸入項目描述、作者、默認標準模式、使用vue-router、不使用ESLint檢查語法、不啓用單元測試、不用Nightwatch。
運行結果如下:
D:\jayceevue>vue init webpack FaceWarrantWeb
? Project name fw-web
? Project description A Vue.js project
? Author jaycee <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? 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 "FaceWarrantWeb".
# Installing project dependencies ...
# ========================
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
> [email protected] postinstall D:\jayceevue\FaceWarrantWeb\node_modules\webpack\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 [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1130 packages from 650 contributors and audited 10654 packages in 82.619s
found 2 vulnerabilities (1 moderate, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details
# Project initialization finished!
# ========================
To get started:
cd FaceWarrantWeb
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
5.創建好之後,進入你的項目目錄
D:\jayceevue>cd FaceWarrantWeb
6.編譯項目,輸入
npm run dev
運行結果如下:
D:\jayceevue\FaceWarrantWeb>npm run dev
> [email protected] dev D:\jayceevue\FaceWarrantWeb
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
DONE Compiled successfully in 3627ms 11:04:07
I Your application is running here: http://localhost:8080
按住Ctrl,點擊 http://localhost:8080
至此一個Vue項目就好了
如下圖所示
7.打包發佈之前先按住Ctrl+C,輸入y終止服務,然後輸入
npm run build
運行結果如下:
I Your application is running here: http://localhost:8080 終止批處理操
作嗎(Y/N)? y
D:\jayceevue\FaceWarrantWeb>npm run build
> [email protected] build D:\jayceevue\FaceWarrantWeb
> node build/build.js
Hash: 773c4fe00f487edd1c37
Version: webpack 3.12.0
Time: 5940ms
Asset Size Chunks Chunk Names
static/js/vendor.42fc6c515ccdfe89bd76.js 113 kB 0 [emitted] vendor
static/js/app.b22ce679862c47a75225.js 11.6 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.30790115300ab27614ce176899523b62.css 432 bytes 1 [emitted] app
static/css/app.30790115300ab27614ce176899523b62.css.map 828 bytes [emitted]
static/js/vendor.42fc6c515ccdfe89bd76.js.map 560 kB 0 [emitted] vendor
static/js/app.b22ce679862c47a75225.js.map 22.2 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 508 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
項目目錄中dist就是打好之後的包了