vue腳手架搭建之單檔案元件的開發

2021-08-25 14:32:29 字數 2436 閱讀 6211

由於乙個完整的專案包含許多的檢視，元件全部寫在乙個html頁面中也不利於後期維護。所以我們需要通過腳手架進行專案工程化來構建我們的專案，就不再使用html來構建了，也不在引入vue.js檔案了。全部換成單檔案元件+webpack+vue的腳手架進行專案的構建。

首先，需要全域性安裝vue腳手架（全域性安裝，只需一次），方法是：npm  i  vue-cli   -global

然後就可以構建專案了，vue提供了兩種模板：webpack的模板、webpack-******的模板。

官方模版 vue init webpack my-project    （tips：**語法檢查較麻煩，適合新手使用）

推薦  vue init webpack-****** my-project   （tips：適合熟練vue腳手架專案的人用）

用這個模板構建專案的前提是已經配置過vue和webpack以及vue腳手架的環境，即 npm install -g vue全域性安裝、npm i webpack -g全域性安裝、 npm install -g vue-cli腳手架全域性安裝。使用指令模板之後，根據提示進行依賴安裝。

以乙個移動端小專案來代入-------------

假設vue和webpack環境已配好，新建乙個目錄並調出小黑窗-->npm  i vue-cli -g（安裝過就不用再裝）--->vue init webpack pro--->cd pro--->npm run dev執行即可，會啟動8080埠，瀏覽器開啟localhost:8080，若占用會預設加1即8081。

專案構建好之後就可以根據需求來修改配置了。下面用路由來實現三個頁面的跳**

首頁 關於

其他注：這個單檔案元件在main.js已在vue例項化中掛載，index.html頁面引入即可展示。在這個元件裡面可以通過router-link做乙個導航路由，去寫一下導航路由連線的元件（在專案的src資料夾的components目錄下建home、about、other元件）
然後在router目錄下配置一下路由規則



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 other from '../components/other'


vue.use(router)


export default new router(,,,


]})
注：上面**有用到子元件向父元件傳值，用的是自定義繫結事件@toparent="getdata"，子元件在掛載的時候通過this.$emit("toparent",this.str)將資料傳送給父元件，父元件通過事件getdata（msg）來接收，msg就是接收的資料。

下面就是用axios來請求資料的使用，需要安裝依賴npm i axios -s,哪個檔案使用就在哪個檔案中引入，引入方式是import axios from "axios".上**：
在上面home元件裡面請求資料展示在頁面上，然後通過params傳參到詳情頁面。下面是詳情頁面的元件：
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 other from '../components/other'


import detail from '../components/detail'


vue.use(router)


export default new router(,,,


,]})
對傳遞資料的處理寫在詳情元件上面。

引入icon圖示的方法，main.js裡面匯入檔案

import './icon/iconfont.css'
和vue搭建比較好的框架有element（適合pc端）餓了嗎餓了嗎     mintui（適合移動端的ui框架）mint-ui要翻牆要翻牆

搭建Vue腳手架

從vue官網安利了一波安裝腳手架的主要 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模板的新專案 vue init webpack my project 安裝依賴，走你 cd my project npm install npm r...

Vue腳手架搭建

sudo apt get install nodejs legacy nodejs sudo apt get install npm 安裝成功後檢視對應版本 npm install vuenpm install g cnpm registry vue安裝成功後檢視對應版本 npm install g...

vue腳手架搭建

一 vue cli腳手架的搭建步驟 首先，確定你的電腦上已經安裝了nodejs，可以使用npm包管理器安裝環境 1 開啟cmd命令視窗，切換到你要新建專案的資料夾下，此時可使用node v檢查node的版本，如果出現版本號則node已安裝。2 使用以下命令全域性安裝vue cli npm insta...