? ? ? ? 由于工作太忙了，一直都是東奔西跑的，好多知識(shí)都是零散的，最近剛好有空，就計(jì)劃利用這個(gè)空閑時(shí)間認(rèn)真的整理以前學(xué)過的知識(shí)，幫助自己回顧過往，中間也難免有很多錯(cuò)誤，歡迎指正挑刺。一直以來都是萬金油，最后就是啥都會(huì)，但是也都是啥都會(huì)一點(diǎn)也都不精，逼著自己寫成文章也是保障梳理自己知識(shí)系統(tǒng)的目的。
- 搭建vue項(xiàng)目環(huán)境
-
-
1、全局安裝vue-cli
# 安裝vue2.X
npm install vue-cli -g
# 安裝vue3.X
npm install -g @vue/cli
-
2、檢查是否安裝成功
-
在命令行輸入：
-
vue --version
-
如果輸出版本號(hào)說明安裝成功
-
3、創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
-
# 進(jìn)入你的項(xiàng)目目錄
cd vuesource
vue init webpack 項(xiàng)目名
-
中間會(huì)有一些輸入提示符的地方，如：
-
? Generate project in current directory? Yes
? Project name test1
? Project description test
? Author test
? Vue build (Use arrow keys) -
還有好幾個(gè)地方，根據(jù)提示內(nèi)容輸入就可以也會(huì)安裝yarn，同意就行，最后會(huì)輸出如下：
-
> test1@1.0.0 lint
> eslint --ext .js,.vue src test/unit test/e2e/specs --fixsh: eslint: command not found
# Project initialization finished!
# ========================To get started:
? npm run dev
??
Documentation can be found at https://vuejs-templates.github.io/webpack -
到這個(gè)時(shí)候還不能著急，還繼續(xù)后面的依賴項(xiàng)要安裝
-
4、安裝依賴
-
npm i這個(gè)命令即可
-
此時(shí)項(xiàng)目文件列表如下：
-
README.md?? ??? ?music-website-master?? ?static
build?? ??? ??? ?node_modules?? ??? ?test
cesium-main?? ??? ?package-lock.json?? ?vueworkplace
config?? ??? ??? ?package.json
index.html?? ??? ?src -
多了node_modules這個(gè)文件夾。
-
5、啟動(dòng)項(xiàng)目
-
$ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev -
即可以，出現(xiàn)：
-
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
(node:10611) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
?12% building modules 24/28 modules 4 active ...se/Desktop/source/vuetest/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
?95% emitting ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? n ? ? ?
?DONE ?Compiled successfully in 2664ms ? ? ?文章來源：http://www.zghlxwxcb.cn/news/detail-665417.html -
即表明成功文章來源地址http://www.zghlxwxcb.cn/news/detail-665417.html
-
到了這里，關(guān)于搭建vue項(xiàng)目環(huán)境之二（完成基礎(chǔ)環(huán)境的搭建之后開始正式安裝）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
