使用vue-cli來搭建vue項目

時間 2020-06-09

標籤使用 vue cli 搭建項目简体版

原文原文鏈接

前提：搭建好NodeJS環境

node -vcss

npm -vhtml

1. 什麼是vue-cli?

vue-cli是vue.js的腳手架，用於自動生成vue.js+webpack的項目模板，建立命令以下：vue

vue init webpack xxxnode

注1：xxx 爲本身建立項目的名稱

注2：必須先安裝vue,vue-cli，webpack，node等一些必要的環境

2. 安裝vue-cli

npm install -g vue-clireact

npm install -g webpackwebpack

注1：安裝成功後，會出現以下文件

D:\initPathgit

　　node-v10.15.3-win-x64github

　　　　node_globalweb

　　　　　　vuevue-router

　　　　　　vue.cmd

　　　　　　vue-init

　　　　　　vue-init.cmd

　　　　　　vue-list

　　　　　　vue-list.cmd

注2：安裝完成以後打開命令窗口並輸入 vue -V（注意這裏是大寫的「V」），若是出現相應的版本號，則說明安裝成功。

3. 使用腳手架vue-cli(2.X版)來構建項目

步驟一：使用腳手架建立項目骨架

此步驟可理解成：使用eclipse建立一個maven的web項目

cmd 打開命令窗口

d: 切換到d盤

cd d:\temp

進入d:\temp目錄

vue init webpack spa1 此命令用於建立SPA項目，它會在當前目錄生成一個以「spa1」命名的文件夾

spa1即爲項目名，項目名不能用中文或大寫字母，而後終端會出現「一問一答」模式(見注2)

注1：cmd命令行窗口顯示中文亂碼，可能是由於cmd命令行窗口字符編碼不匹配致使

修改cmd窗口字符編碼爲UTF-8，命令行中執行：chcp 65001

切換回中文：chcp 936

這兩條命令只在當前窗口生效，重啓後恢復以前的編碼。

注2：「一問一答」模式

1.Project name：項目名，默認是輸入時的那個名稱spa1，直接回車

2.Project description：項目描述，直接回車

3.Author：做者，隨便填或直接回車

4.Vue build：選擇題，通常選第一個

4.1 Runtime + Compiler: recommended for most users//運行加編譯，官方推薦，就選它了

4.2 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue filesrender functions are required elsewhere//僅運行時，已經有推薦了就選擇第一個了

5. Install vue-router：是否須要vue-router，Y選擇使用，這樣生成好的項目就會有相關的路由配置文件

6.Use ESLint to lint your code：是否用ESLint來限制你的代碼錯誤和風格。N 新手就不用了，但實際項目中通常都會使用，這樣多人開發也能達到一致的語法

7.Set up unit tests：是否安裝單元測試 N

8.Setup e2e tests with Nightwatch?：是否安裝e2e測試 N

9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)

> Yes, use NPM

Yes, use Yarn

No, I will handle that myself //選擇題：選第一項「Yes, use NPM」是否使用npm install安裝依賴

所有選擇好回車就進行了生成項目，出現以下內容表示項目建立完成

Project initialization finished!

========================

實在不會選，就回車選擇「默認」或是選擇「N」不安裝

步驟二：運行完上面的命令後，咱們須要將當前路徑改變到SPA這個文件夾內，而後安裝須要的模塊

此步驟可理解成：maven的web項目建立成功後，修改pom文件添加依賴

cd spa1 #改變路徑到spa1文件夾下

npm install #安裝全部項目須要的npm模塊

步驟三：啓動並訪問項目

此步驟可理解成：啓動tomcat，並經過瀏覽器訪問項目

cd spa1

npm run dev

注1：項目啓動成功後，打開瀏覽器輸入「http://localhost:8080」便可

注2：vue-cli構建的項目，在控制檯npm run dev啓動後，默認的調試地址是8080端口的可是大部分時候，

咱們都要並行幾個項目開發，頗有可能已經佔用了8080端口，因此就涉及到如何去更改調試地址的端口號了

config --> index.js文件

dev: {

// Paths

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {},

host: 'localhost',

port: 8088, // 在這裏修改端口號

autoOpenBrowser: false,

errorOverlay: true,

notifyOnErrors: true,

步驟四：中止項目添加element-ui模塊

cd spa1

npm install element-ui -S

-S就是-save的縮寫

注1：使用vue+elementUI建立SPA項目，通常狀況下其項目結構組成以下：

Vue + ESLint + webpack + elementUI + ES6

Vue: 主要框架

ESLint: 幫助咱們檢查Javascript編程時的語法錯誤，這樣在一個項目中多人開發，能達到一致的語法

Webpack: 設置代理、插件和loader處理各類文件和相關功能、打包等功能。整個項目中核心配置

elementUI: 是基於vue的一套樣式框架，裏面有不少封裝好的組件樣式

ES6: 全稱ECMAScript6.0，是JavaScript的下一個版本標準，2015.06發版

4. package.json詳解

每一個項目的根目錄下面，通常都有一個package.json文件，定義了這個項目所須要的各類模塊，

以及項目的配置信息（好比名稱、版本、許可證等元數據）。npm install命令根據這個配置文件，

自動下載所需的模塊，也就是配置項目所需的運行和開發環境

詳情見資料「package-詳解.json」中的相關注釋

5. npm install/npm install xxx -S/npm install xxx -D/npm install xxx -g的區別

5.1 npm install

下載「package.json」中dependencies和devdependencies中配置的全部依賴模塊，並保存到項目的node_modules目錄

注1：在git clone項目的時候，項目文件中並無node_modules文件夾，爲何呢？

5.2 npm install xxx -g

全局安裝，下載依賴模塊，並保存到%node_home%\node_global\node_modules目錄下

5.3 npm install xxx -S

寫入到package.json的dependencies對象，並保存到項目的node_modules目錄

5.3 npm install xxx -D

寫入到package.json的devDependencies對象，並保存到項目的node_modules目錄

注1：在git clone項目的時候，項目文件中並無node_modules文件夾，爲何呢？

咱們知道這個文件中(project_home\node_modules)保存的是咱們項目開發中所使用的依賴模塊。這個文件夾可能有幾百兆大小，

若是放到github上，其它人clone的時候會很是慢，這個時候就想到用一個package.json依賴配置文件解決這個問題。

這樣每一個人下載這個項目的時候，只須要進入該項目目錄直接npm install npm就會到裏面去找須要的函數庫，也就是依賴。

注2：縮寫命令的全稱，注意大小寫、-S,-D都是大寫i/install

-S/--save

-D/--save-dev

-g/--global

注3：package.json文件裏面的devDependencies和dependencies對象有什麼區別呢？devDependencies裏面的插件只用於開發環境，不用於生產環境，而dependencies是須要發佈到生產環境的。

例如：gulp ，babel，webpack通常都是輔助工具，應該使用--save-dev安裝到開發環境

例如：vue ,react，應該使用--save 安裝到生產環境

6. vue項目結構說明

build文件夾這個文件夾主要是進行webpack的一些配置

webpack.base.conf.js webpack基礎配置,開發環境,生產環境都依賴

webpack.dev.conf.js webpack開發環境配置

webpack.prod.conf.js webpack生產環境配置

build.js 生產環境構建腳本 vue-loader.conf.js 此文件是處理.vue文件的配置文件

config文件夾

dev.env.js 配置開發環境

prod.env.js 配置生產環境

index.js 這個文件進行配置代理服務器，例如：端口號的修改

node_modules文件夾存放npm install時根據package.json配置生成的npm安裝包的文件夾

src文件夾源碼目錄(開發中用得最多的文件夾)

assets 共用的樣式、圖片

components 業務代碼存放的地方，裏面分紅一個個組件存放，一個頁面是一個組件，一個頁面裏面還會包着不少組件

router 設置路由

App.vue vue文件入口界面

main.js 對應App.vue建立vue實例，也是入口文件，對應webpack.base.config.js裏的入口配置

static文件夾存放的文件不會通過webpack處理，能夠直接引用，例如swf文件若是要引用能夠在webpack配置

對swf後綴名的文件處理的loader，也能夠直接將swf文件放在這個文件夾引用

package.json 這個文件有兩部分是有用的：scripts 裏面設置命令以及在dependencies和devDependencies中，

分別對應全局下載和局部下載的依賴包

7. 什麼是*.vue文件

*.vue 文件，是一個自定義的文件類型，用相似HTML的語法描述一個Vue組件。

每一個.vue文件包含三種類型的頂級語言塊 <template>, <script> 和 <style>。

這三個部分分別表明了 html,js,css。

注1：不能直接把html代碼包裹在<template></template>中，而是必須在裏面方置一個html標籤來包裹全部的代碼。

通常狀況是使用<div></div>標籤包含其它的代碼(保證只有一個根元素)

</template>

注2：js代碼寫在<script>標籤中，並經過export導出

export default {name: 'App'

}

</script>

注3：樣式與之前的寫法同樣

8. 綜合案例

寫一個簡單的嵌套路由案例，主要建立和修改如下文件：

About.vue

<template>
    <div>
        <router-link to="/AboutMe">關於博主</router-link>
        <router-link to="/AboutWebSite">關於網站</router-link>
        <router-view/>
    </div>
</template>

<script> export default{ data(){ return { }; } } </script>

<style>
</style>

AboutMe.vue

<template>
    <div> 顯示博主我的資料 </div>
</template>

<script> export default{ data(){ return { }; } } </script>

<style>
</style>

AboutWebSite.vue

<template>
    <div> 顯示網站發展歷史 </div>
</template>

<script> export default{ data(){ return { }; } } </script>

<style>
</style>

Home.vue

<template>
    <div> 顯示博客內容 </div>
</template>

<script> export default{ data(){ return { }; } } </script>

<style>
</style>

index.js

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home' import About from '@/components/About' import AboutMe from '@/components/AboutMe' import AboutWebSite from '@/components/AboutWebSite' Vue.use(Router) export default new Router({ routes: [{ path: '/', name: 'Home', component: Home }, { path: '/Home', name: 'Home', component: Home }, { path: '/About', name: 'About', component: About, children: [{ path: '/AboutMe', name: 'AboutMe', component: AboutMe }, { path: '/AboutWebSite', name: 'AboutWebSite', component: AboutWebSite } ] } ] })

App.vue

<template>
  <div id="app">
           <!--<img src="./assets/logo.png">-->
        <router-link to="/Home">首頁</router-link>
        <router-link to="/About">關於</router-link>
            <router-view/>
  </div>
</template>

<script> export default { name: 'App' } </script>

<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;
}
</style>