vue 腳手架簡單安裝流程
- 首先是環(huán)境的安裝：node.js
安裝成功后影钉，在命令框輸入命令即可檢驗(yàn)：
user@WIN-868BOKTBB7K MINGW64 /e/MarkNote/Vue/vue腳手架搭建/helloWorld
$ node -v
v10.16.0
user@WIN-868BOKTBB7K MINGW64 /e/MarkNote/Vue/vue腳手架搭建/helloWorld
$ npm -v
6.9.0
能夠顯示版本號(hào)，說明環(huán)境已經(jīng)安裝好了趟据。
- 下面就是全局安裝 Vue 中腳手架工具：vue-cil
輸入命令：npm install -g vue-cli
等待安裝完畢即可米母。 - 下面就用這個(gè)腳手架搭建一個(gè)建議的 vue 項(xiàng)目
user@WIN-868BOKTBB7K MINGW64 /e/MarkNote/Vue/vue腳手架搭建/helloWorld
$ vue init webpack demoProject
? Project name (demoProject) hellovue
? Project name hellovue
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (user <XXXXXXX@qq.com>)
? Author user <XXXXXXX@qq.com>
? Vue build (Use arrow keys)
? Vue build runtime
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) yarn
vue-cli · Generated "demoProject".
# Installing project dependencies ...
# ========================
'yarn' ????????????????????????е????
?????????????
# Project initialization finished!
# ========================
To get started:
cd demoProject
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
注意：該命令需要在聯(lián)網(wǎng)狀態(tài)下執(zhí)行才能成功下愈。
這樣一個(gè)簡單的 vue 項(xiàng)目就建立完成击蹲。
項(xiàng)目文件結(jié)構(gòu)如下圖：
001.JPG
- 最后，我們運(yùn)行一下該項(xiàng)目：
進(jìn)入到項(xiàng)目目錄婉宰，命令窗口內(nèi)輸入命令：npm install
安裝項(xiàng)目文件用到的依賴歌豺。
安裝完畢后，項(xiàng)目目錄會(huì)出現(xiàn)一個(gè)"node_modules"文件夾心包，里面存放的就是依賴文件类咧。然后再運(yùn)行命令：npm run dev
user@WIN-868BOKTBB7K MINGW64 /e/MarkNote/Vue/vue腳手架搭建/helloWorld/demoProject
$ npm run dev
> hellovue@1.0.0 dev E:\MarkNote\Vue\vue腳手架搭建\helloWorld\demoProject
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
1 1 1 12% building modules 21/27 modules 6 active ...搭建\helloWorld\demoProject\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
1 1 95% emitting DONE Compiled successfully in 2443ms2:35:47 PM
I Your application is running here: http://localhost:8080
按照提示，打開瀏覽器輸入地址：http://localhost:8080
最終結(jié)果如下：
002.JPG
到此蟹腾，vue 腳手架搭建完畢痕惋，創(chuàng)建的一個(gè)測試項(xiàng)目也正常運(yùn)行。
