簡介

之前寫過一篇文章Vue-cli項目創建,主要是針對Vue-cli3.0版本之前的，由于現在Vue-cli版本更新到了3.0，而且創建項目的一些情況也發生了變化，所以本篇將在基于Vue-cli3.0以上版本創建項目，大家可以參考一下Vue-cli2.0版本（這里的Vue-cli3.0版本之前統稱為2.0版本）和Vue-cli3.0版本的不同之處，不要混淆了。
大家也可以進入Vue-cli3官網進行查看相關信息。

vue.png

安裝

說明

這里不介紹Vue-cli3.0項目所需的Node.js那些安裝了，但是Node.js版本必須是8.9 或更高版本(推薦 8.11.0+)，大家還不清楚的話就去查看我之前寫的文章Vue-cli項目創建，會有說明。
在安裝之前我們來介紹一下Vue-CLI:

• 通過 @vue/cli 搭建交互式的項目腳手架。
• 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
• 一個運行時依賴 (@vue/cli-service)，該依賴：
  • 可升級；
  • 基于 webpack 構建，并帶有合理的默認配置；
  • 可以通過項目內的配置文件進行配置；
  • 可以通過插件進行擴展。

• 一個豐富的官方插件集合，集成了前端生態中最好的工具。
• 一套完全圖形化的創建和管理 Vue.js 項目的用戶界面

進入安裝

安裝Vue-cli3.0項目的命令的一些改變記錄一下。打開Git Bash Here

• npm安裝Vue-cli3.0或者cnpm安裝Vue-cli3.0

$ npm install -g @vue/cli  # -g或者global 表示全局安裝
#或者
$ cnpm install -g @vue/cli
#或者
$ yarn global add @vue/cli # 必須先安裝yarn 

• 注：yarn官方文檔使用在這里，大家可以去試試yarn的使用

而之前的Vue-cli2.0是這樣的

$ cnpm install --global vue-cli

安裝完成之后查看版本信息

$ vue --version

vue版本.png

基礎

Vue-cli3.0進行單個原型開發

1.安裝cli-service-global

$ npm install -g @vue/cli-service-global
#或者
$ cnpm install -g @vue/cli-service-global

2.必備有一個.vue文件，而且符合Vue模板樣式就可以如下App.vue

<template>
  <h1>Hello! Welcome Leaning Vue-cli3.0</h1>
</template>

3.在App.vue這個目錄中運行vue serve

$ vue serve

• 注：vue serve 使用了和 vue create 創建的項目相同的默認設置 (webpack、Babel、PostCSS 和 ESLint)。它會在當前目錄自動推導入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一個,也就是說如果你創建的.vue文件是Hello.vue的話，那么你運行的應該是這樣的

$ vue serve Hello.vue # 必須要指定哪個.vue文件

4.vue build 該文件,同樣的情況，默認入口文件的main.js、index.js、App.vue 或 app.vue

$ vue build

如果不是則

$ vue build Hello.vue

創建項目

在Vue-cli 2創建項目是這樣的

$ vue init webpack vuefirstdemo #這是基于webpack 

而Vue-cli3的用法是create [options] <app-name>

$ vue create helloworld 

提示選取一個 preset。你可以選默認的包含了基本的Babel + ESLint 設置的 preset，可以手動選擇，或者默認即可。

preset.png

vue create.png

創建完成.png

創建完成后，直接運行

$ cd helloworld
$ npm run serve

vue run.png

打包上線

$ npm run build

查看項目結構

項目結構.png

• 項目結構注解：

|—node-modules：依賴的node庫文件
|—public：公共文件，如index.html入口文件
|—src
    |—assets：資源文件img、css、html等等
    |—component：組件
    |—App.vue：vue的根組件
    |—main.js：主函數入口文件
|—package.json：項目描述文件

你也可以通過圖形化界面管理和創建項目

$ vue ui

vue ui.png

vue ui mng.png

• 注：如果想恢復使用Vue-cli2.x的話可以這么來操作

$ npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
$ vue init webpack my-project

總結

好了，這里就完成了Vue-cli3的項目創建了，在IDEA開發工具創建，將會在下篇文章講解，大家需要注意的是創建命令的改變了，其他項目結構沒有多大的變化。

在前面我所講的Vue-cli2項目創建大家可以去查看一下,總結他們的區別。

推薦

歡迎大家進入我的博客學習相關知識我的博客https://eirunye.github.io。