最近跳槽換了工作，進(jìn)入新的單位接觸了新的項目（vue框架）。雖然花了半天時間就上手寫業(yè)務(wù)了，但是由于新項目使用的是vue-cli3.0腳手架搭建的，于是和2.*差別還是蠻大的，自定義配置內(nèi)容變的陌生了。
于是，今天用vue-cli3.0自己創(chuàng)建個簡單demo記錄一下，并簡單解析一下各個文件的作用，簡單上手。

官網(wǎng)API

第一件最重要的事當(dāng)然是找到官方文檔
Vue-CLI3

Remove and Install

$ vue --version
2.9.3
$ node -v
v10.6.0

先看下本機(jī)全局包的版本情況，
官方要求 Node.js 8.9+(推薦 8.11.0+)
由于我已經(jīng)有裝vue腳手架了，所以

Step 1. 卸載

npm uninstall vue-cli -g 或 yarn global remove vue-cli

$ npm uninstall vue-cli -g

npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
removed 653 packages in 28.422s

Step 2. 安裝

npm install -g @vue/cli 或 yarn global add @vue/cli

$ npm install -g @vue/cli
/usr/local/bin/vue -> /usr/local/lib/node_modules/@vue/cli/bin/vue.js

> fsevents@1.2.4 install /usr/local/lib/node_modules/@vue/cli/node_modules/fsevents
> node install

[fsevents] Success: "/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> protobufjs@6.8.8 postinstall /usr/local/lib/node_modules/@vue/cli/node_modules/protobufjs
> node scripts/postinstall


> nodemon@1.18.3 postinstall /usr/local/lib/node_modules/@vue/cli/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate

+ @vue/cli@3.0.0-rc.5
added 690 packages from 471 contributors in 65.346s

$ vue --version
3.0.0-rc.5

@vue/cli@3.0.0-rc.5已經(jīng)是RC（Release Candidate|最終測試版）版了

Step 3. 構(gòu)建一個項目

在選好的目錄下構(gòu)建一個項目
vue create vue3-project
連構(gòu)建都換命令了，還記得之前是vue init

image

image

===> 遇到了點小插曲，安裝報錯了。通過open ~/.vuerc將"useTaobaoRegistry": true改為false再來一遍。成功??！

Step 4. 看一看新腳手架出來的都是些什么小鬼

把初始化的目錄層級先放一放

vue3-project
    node_modules
    public
        favicon.ico
        index.html
    src
        assets
            logo.png
        components
            HelloWorld.vue
        App.vue
        main.js
    .gitignore
    babel.config.js
    package-lock.json
    package.json
    README.md

第一感覺絕對是，what?!!! 怎么文件（配置文件）少了辣么多?。?！
搞笑如我，已經(jīng)開始懷疑項目是不是能跑起來了，于是馬上鍵入npm run serve，然后項目完美跑起來了?？磥?到3工程師大神們做了不少努力啊！

由于我都使用了默認(rèn)配置，這里和package.json同級的文件少了個重要的vue配置文件vue.config.js重要的參數(shù)配置都在這里面寫

到這里推薦一下第二種構(gòu)建項目的方式-->vue ui命令行，通過GUI圖形界面來構(gòu)建項目，賊拉清晰。文章寫到這里，樓主已經(jīng)用圖形界面重新構(gòu)建了一個項目，然后各種點點看看停不下來了。