Vue-cli腳手架工具搭建項目

時間 2020-05-23

標籤 vue cli 腳手架工具搭建項目简体版

原文原文鏈接

vue-cli腳手架搭建項目

單文件組件

簡單來講就是把組件單獨放到一個文件裏
在vue裏面，咱們這個文件的後綴叫 .vue
.vue有默認的三大部分： template script style
如何生成三大部分？快捷鍵：sca + 回車完整版:scaffold + 回車//修改如今已經更新爲 <vue

Vue-cli ---腳手架工具

基本概念及做用

把 .vue 翻譯成瀏覽器能夠識別的內容
自動刷新瀏覽器
自動壓縮代碼
自動的把js翻譯爲低版本的js(es6/7 翻譯成es5)
做爲代理服務器(在本地開啓一個小型的web服務器)
方便幫咱們管理咱們導入的第三方包
....

vue-cli 安裝

官網css

安裝html

安裝淘寶鏡像文件：npm install -g cnpm --registry=https://registry.npm.taobao.orgvue

安裝腳手架第一種方式：npm install -g @vue/cli, 在任意的路徑均可以，這是全局安裝，安裝成功一次便可node

安裝腳手架第二種方式：vue ui 這是經過ui界面的方式來安裝webpack

注意點

1. 第一次安裝，安裝成功了
1. 已經安裝過，從新安裝
1. 相似於這樣的一堆err!安裝失敗了
2. 解決方案:
  1. 更換網絡環境：有線，換無線，無線換4G
  2. 更換安裝的工具
    1. cnpm ：cnpm install -g @vue/cli
    2. yarn :yarn global add @vue/cli
  3. 清除npm緩存以後，從新安裝
    1. npm cache clean -f
    2. 從新執行安裝的命令
命令查看是否成功
1. vue --version

總結：腳手架的安裝就一行命令

1.安裝：npm install -g @vue/cligit

2.安裝完成查看版本： vue --versiones6

Vue-cli項目建立

傳送門github

正常的流程

vue-cli 安裝完成以後，就能夠開始建立項目了，小夥伴們快來體驗吧！！web

注意事項

建立以後會多一個項目文件夾，路徑不要亂選
項目名不要有中文，不要有大寫字母，儘量有意義

vue create 項目名
例如：vue create demo

彈出的對話框先選擇默認的選項

稍等一會，等進度條走完提示以下畫面說明成功了

進入項目文件夾vue-router
1. cd 項目名 直接根據提示便可
  
  cd demo
運行項目
1. npm run serve
稍等片刻，出現以下效果說明成功了

注意

項目搭建完成先複製一份，目的是爲了下個項目直接使用，而不用再從新安裝腳手架

報錯的緣由

建立的命令輸入錯誤create輸入成了creat
1. 網絡問題，有線換無線，無線換4G
2. 終端的權限問題；新建管理員模式的終端
3. 當前這個文件夾，這個文件被其餘軟件佔用：關閉全部可能影響的軟件（重啓）
4. npm包管理工具的問題:
  1. 用yarn來安裝
  2. 執行npm cache clean -f 在從新建立項目
建立項目是，又到了第三方模塊，文件太多了git認爲沒有必要管，提示你一下

vue-cli建立項目是，已經設置了git忽略文件就在.gitignore中

實在沒法建立項目的解決方案（重要）

vue-cli建立項目的本質是：
1. 建立文件夾
2. 下載第三方模塊
3. 建立項目的基本結構
4. 設置各個文件之間的關係
5. 建立git倉庫
找一個能夠建立項目的人，建立一個項目
1. 刪除 node_modules
2. 發給你
3. 你使用 npm i 安裝項目中用到的第三方模塊
4. npm run serve

總結：腳手架建立項目流程

vue create demo
cd demo
npm run serve

vue-cli項目初體驗

Vue-cli項目結構介紹

腳手架建立完項目後，會自動把項目加入git託管功能

詳細解釋

vue-cli 項目文件夾名稱
node_modules 第三方包文件
public 傳統意義的首頁和圖標
- favicon.ico 圖標
- index.html 腳手架自動生成的，咱們無需理會，可是後面cdn加速的時候須要修改裏面配置
src assets和components ---代碼都寫在src裏面
- assets ：存放全部的靜態資源（圖片、樣式、字體圖標）
- components :組件各類各樣的組件放到components裏面
- App.vue : 主組件，是惟一的，至關於咱們以前寫的index.html 入口文件
- main.js : 入口js 文件，項目一啓動會先來執行main.js裏面的代碼；在這個文件裏咱們能夠導入第三方包和其餘字組件
.gitignore 告訴git哪些文件夾須要忽略，讓git忽略某些文件和文件夾如：node_modules
babel.config.js js的編譯設置，腳手架能夠把高版本js轉成低版本js就是在這個文件夾
package-lock.json 項目的配置信息
package.json 記錄第三方模塊的一些信息；注意：在serve裏面加上--open 就會默認打開網頁

Vue-cli項目代碼編出初體驗

1.來到項目文件目錄，注意是要進到項目裏面，打開小黑框

在小黑框命令行輸入：npm run serve 輸入命令以後，它就會將項目打包，並且有一個小型的 web服務器，以後你就能夠訪問了，以下：

本身電腦上訪問用 loacal，別人訪問用 network,訪問結果以下：

2.main.js和 App.vue

main.js 和主組件代碼分析：

1.main.js 首先進入main.js 查看內容：

import Vue from 'vue' import App from './App.vue' //導入子組件index.vue import index from './components/index.vue' // 是否打印提示信息，能夠刪除 // 刪除的話，默認值爲true Vue.config.productionTip = false // new Vue({ // render: h => h(App), // }).$mount('#app') // 上面註釋代碼 至關於以下： new Vue({ el: '#app', // 把App組件渲染出來,頁面一啓動就渲染的頁面，這就是爲何默認渲染的App.vue render: h => h(App), })

2.主組件 App.vue，進入清空裏面代碼；輸入快捷鍵 sca生成結構代碼（ <script><style>）

組件的邏輯直接寫在 xx.vue,子組件寫在components文件夾內
- index.vue 新建子組件，在子組件中輸入 sca 生成結構代碼
目前寫在App.vue 這個頂級組件裏
靜態資源放到assets文件夾下面，直接使用對應路徑便可引入
css assets也是這個文件夾，如何引入? 這是2種導入css樣式的方式
1. 直接在App.vue 文件 style標籤中引入
```
/* 使用css支持的語法導入 */ /* @import url('./assets/base.css'); */ 
```
1. 在main.js文件中引入
```
// 導入 樣式 import './assets/base.css' //這是vue的寫法
```

Vue-cli src代碼結構

main.js中
1. 建立了最外層的Vue實例
2. 把App.vue這個組件，當作Vue實例內部的最頂級組件並渲染出來
3. 和public/index.html 中的那個id爲app的div關聯起來
App.vue 最頂級的那個組件，僅次於Vue實例
assets靜態資源文件夾,網站的全部靜態文件都放到這個文件夾
components組件文件夾，除了App.vue以外的組件，都寫到這個文件夾中便可

註冊全局組件

顧名思義：註冊之後，全部地方均可以使用這個組件
組件的三大部分
- >
- <script></script>
- <style></style>

快捷鍵 sca +回車或者 <> + 回車

使用組件的注意事項：

1.裏面必須用跟標籤包裹

<template> <div> <h1>我是組件1</h1> </div> </template>

2.代碼寫到 exprot default 裏面

<script> export default { }; </script>

詳細過程：

第一步：在components文件夾下，新建組件

sca

建立子組件

代碼以下：

<template> <div> <h3>我是hello vue</h3> <button @click="tips">點我呀</button> </div> </template> <script> export default { methods:{ tips(){ alert('我被點了'); } } } </script> <style> </style>

第二步：

來到 main.js
使用 import 名字 from '組件路徑' 引入
調用Vue.componment('組件id'，組件名字) 來註冊（Vue的V是大寫）

在須要用到這個組件地方，寫 組件id的標籤 就能夠了

代碼以下：

// 進入main.js 文件 import Vue from 'vue' import App from './App.vue' // 導入子組件 hellovue import hellovue from './components/hellovue.vue' //註冊組件 Vue.component('hello',hellovue); // 是否打印提示信息，能夠刪除 // 刪除的話，默認值爲true Vue.config.productionTip = false // new Vue({ // render: h => h(App), // }).$mount('#app') // 上面註釋代碼 至關於以下： new Vue({ el: '#app', // 把App組件渲染出來 render: h => h(App), })

註冊局部組件

顧名思義：在哪註冊，就在哪可使用
用法：
1. 在須要用的地方，引包 import 名字 from '組件路徑' 引入`
2. 在 export default 裏寫一個屬性： componments 傳入一個對象，對象裏寫這個組件名
3. 組件名叫什麼，那麼在html 裏就能夠寫這個名字的標籤

代碼以下：

<template> <div> <h1>這是我建立的第一個cli項目</h1> <hello></hello> <localvue></localvue> <localvue></localvue> </div> </template> <script> // 註冊局部組件,在哪註冊，在哪使用 在App.vue裏註冊的只能在App.vue裏面使用 import localvue from './components/localvue.vue' export default { components:{ localvue } } </script> <style> </style>

組件的`name`屬性

直接在組件的內部寫name:值便可
不能用中文
寫了以後，chrome的vue插件中能夠看到這個名字，更加利於檢索，利於編碼

代碼以下：
```
<script> export default { name:'hellovue' } </script>
```

Vue-cli項目的路由整合

準備工做

建立項目vue create 項目名
進入項目文件夾cd 項目名
運行項目npm run serve
稍等片刻，經過提示的地址在瀏覽器中打開
刪除多餘的組件components/內部的文件
刪除app.vue中的內容

整合路由

下載路由 npm i vue-router
導包 import VueRouter from 'vue-router'
用包
1. 建立路由規則
  1. 建立一個組件xxx.vue
  2. routes=[ {path:"/xx",component:組件} ]
2. 建立路由對象
  1. router
3. 設置給Vue實例
  1. new Vue({ router })

代碼以下：

// 導入路由 import VueRouter from 'vue-router';//注意大小寫 // use一下 Vue.use(VueRouter); // 1.導入組件 import index from "./components/03.index.vue" // 2.準備規則 const routes = [ { path: "/index", component: index } ] // 3.建立路由對象 const router = new VueRouter({ routes }) new Vue({ render: h => h(App), //4.掛載路由 router }).$mount('#app')