Vue-cli3.0項目建立

簡介

以前寫過一篇文章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-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-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 server 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，能夠手動選擇，或者默認便可。

建立完成後，直接運行

$ cd helloworld
$ npm run serve

打包上線

$ npm run build

查看項目結構

• 項目結構註解：

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

你也能夠經過圖形化界面管理和建立項目

$ vue ui

• 注：若是想恢復使用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。