前言

vue是現(xiàn)階段很流行的前端框架，很多人通過(guò)vue官方文檔的學(xué)習(xí)，對(duì)vue的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及vue全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程；對(duì)于剛開(kāi)始解除vue的新手，建議使用官方腳手架vue-cli,當(dāng)然，如果你對(duì)于webpack很熟悉，你也可以自己動(dòng)手搭建自己的腳手架，當(dāng)然如果你沒(méi)把握的話，還是推薦使用vue-cli，能更好的幫助你搭建項(xiàng)目：

步驟一、安裝vue-cli

首先，我們可以通過(guò)npm安裝vue-clic,前提是我們需要有node環(huán)境，如果電腦還沒(méi)安裝node，先安裝，可通過(guò)

node -v

查詢node的版本號(hào)，有版本號(hào)則已經(jīng)安裝成功；

接下來(lái)，我們需要確保電腦已經(jīng)安裝了webpack，webpack是一個(gè)包管理工具，也是vue-cli的構(gòu)建工具，安裝也很簡(jiǎn)單，全局安裝只需要執(zhí)行

npm install webpack -g

緊接著，開(kāi)始我們vue-cli的安裝

npm install --global vue-cli

查看是否安裝成功，我們可以通過(guò)在cmd中輸入vue -V 查看，如下圖出現(xiàn)版本號(hào)則說(shuō)明安裝已經(jīng)完成；

我們可以打開(kāi)c盤>用戶>用戶名>AppData>Roaming>npm查看我們?nèi)职惭b的vue-cli,如下圖：

步驟二、構(gòu)建工程文件

安裝完vue-cli后，我們可以通過(guò)在cmd中輸入

vue init webpack projectName

生成webpack腳手架，在我們按下回車的時(shí)候，會(huì)出現(xiàn)一些提示問(wèn)題，對(duì)應(yīng)關(guān)系如下：

• 項(xiàng)目名稱(注意名稱中不要出現(xiàn)大寫字母，否則會(huì)報(bào)錯(cuò))
• 項(xiàng)目描述(可寫可不寫，看個(gè)人需要)
• 作者(可寫可不寫，看個(gè)人需要)
• vue編譯，這個(gè)選默認(rèn)即可，運(yùn)行加編譯Runtime + Compiler
• 是否安裝vue-router是否安裝vue路由工具
• 是否使用代碼管理工具ESLint管理你的代碼
• 后面幾個(gè)是測(cè)試的工具，需要自己自行了解
• ......

緊接著，我們使用cd squareRoot 移動(dòng)到文件夾squareRoot下，執(zhí)行

npm install

初始化項(xiàng)目，安裝package.json 文件中描述的依賴，初始化完成后，我們可以通過(guò)

npm run dev

運(yùn)行我們的項(xiàng)目，這個(gè)時(shí)候，我們可以打開(kāi)瀏覽器，輸入http://localhost:8080/，可看到如下界面，說(shuō)明我們的項(xiàng)目腳手架已經(jīng)初始化完成；

步驟三、項(xiàng)目結(jié)構(gòu)解析

雖然我們是通過(guò)vue-cli生成的項(xiàng)目結(jié)構(gòu)，但還是希望讀者能夠清楚的知道每個(gè)文件的作用，這樣對(duì)于我們學(xué)習(xí)該腳手架以及搭建自己的腳手架會(huì)有很好的幫助，如下圖，是一級(jí)目錄下的文件的作用：

構(gòu)建相關(guān)的代碼主要是放在build文件夾和config文件夾下，包括了開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境，即dev和product,可以打開(kāi)文件進(jìn)行閱讀，有接觸過(guò)node的小伙伴應(yīng)該可以很快讀懂對(duì)應(yīng)文件代碼的作用，這里就不做詳細(xì)的介紹了，需要注意的一點(diǎn)是，我們需要修改打包后文件的路徑的時(shí)候，可以通過(guò)修改config文件夾下的index.js文件，如下圖：

這里，我們需要在src目錄下新增一個(gè)page文件夾，用于存放頁(yè)面相關(guān)的組件，而components存在的是公共的組件，這樣做有利于我們更好的理解項(xiàng)目：

步驟四、引入U(xiǎn)I框架iView

該步驟并不是一定要實(shí)現(xiàn)的，實(shí)際項(xiàng)目操作中，要根據(jù)具體需求而引入對(duì)應(yīng)的UI框架或者不引入，鑒于指導(dǎo)的作用，在此處也做個(gè)示范，給與參考，可先閱讀iVew官網(wǎng)學(xué)習(xí)；

首先，我們應(yīng)進(jìn)行iView的安裝，可利用npm包管理工具安裝

npm install iview --save

安裝成功后，我們要將對(duì)應(yīng)的框架引入到項(xiàng)目中，這個(gè)時(shí)候，官網(wǎng)上有兩種方法可以實(shí)現(xiàn)，第一種是直接在main.js中做如下配置：

import Vue from 'vue'import App from './App'import router from './router'import iView from 'iview';import 'iview/dist/styles/iview.css';Vue.config.productionTip = falseVue.use(iView);/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: ''})

這種方式是一種全局引入的方式，引入后就在具體的頁(yè)面或者組件內(nèi)不需要再進(jìn)行其他的引入，但缺點(diǎn)是無(wú)論是否需要該組件，都將全部引入，對(duì)于性能優(yōu)化不是很好，這里推薦第二種用法，按需引入，這里需要借助插件babel-plugin-import實(shí)現(xiàn)按需加載組件，減小文件體積。首先需要安裝，并在.babelrc中配置：

npm install babel-plugin-import --save-dev// .babelrc{ "plugins": [["import

總結(jié)

以上是生活随笔為你收集整理的vue怎么改logo_vue全家桶项目构建教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。