欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

從零到一詳聊創(chuàng)建Vue工程及遇到的常見問題

 更新時間:2019年04月25日 10:54:45   作者:pubdreamcc  
這篇文章主要介紹了從零到一詳聊如何創(chuàng)建Vue工程及遇到的常見問題 ,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下

準(zhǔn)備工作

1.判斷是否需要FQ或安裝鏡像,鏡像一般可安裝國內(nèi)淘寶鏡像,詳情可看這里:cnpm

npm install -g cnpm --registry="cnpm"全局安裝淘寶cnpm。

2.開發(fā)工具選擇很多,VUE無專用開發(fā)工具,開發(fā)項目多以SPA形式體現(xiàn),本例使用 Visual Studio Code。

3.調(diào)試工具選擇很多,官方推薦 vue-devtools 。

安裝方法:FQ或者github主頁。https://github.com/vuejs/vue-devtools下載壓縮包,解壓到Chrome擴(kuò)展程序。

環(huán)境搭建

1.安裝 Node.js 10.15.3, npm包管理工具(高版本node.js自帶npm)。

安裝完成后,DOS命令行輸入命令檢查安裝情況npm -v,出現(xiàn)npm版本號即可。

 下載地址https://nodejs.org/en/download/

2.全局安裝 vue-cli腳手架

DOS命令行安裝(-g 參數(shù)表示安裝至 npm 工作路徑,以后任意位置均可訪問)

npm install -g vue-cli

3.安裝 開發(fā)工具 Visual Studio Code

1.下載地址 https://code.visualstudio.com/Download

注意 User Installer / System Installer 不同(建議安裝系統(tǒng)版本)

2.安裝 Vetur ,vue 2 snippets插件

文件 -> 首選項 -> 擴(kuò)展 -> 搜索 -> 輸入 Vetur/vue 2 snippets -> 安裝

3.安裝 語言包(視個人喜好)

文件 -> 首選項 -> 擴(kuò)展 -> 搜索 -> 輸入 Chinese(Simplified)... -> 安裝

4.打開文件夾... 開發(fā)已存在項目

4.安裝 vue-devtools。

1.下載 https://github.com/vuejs/vue-devtools

2.DOS 命令進(jìn)入解壓后目錄

 修改 \shells\chrome\manifest.json中 background 節(jié)點(diǎn) persistent 值為 true

3.運(yùn)行 npm install 命令安裝依賴包。

進(jìn)度條等待完成,大約5-15分鐘,必要使用cnpm

4.運(yùn)行 npm run build(一定要執(zhí)行這步,不然后面會報錯)

5.啟動 Google Chrome -> 輸入 chrome://extensions/ -〉確認(rèn)打開“開發(fā)者模式” -> 加載已解壓擴(kuò)展程序 -> 選擇 shells\chrome 確定即可安裝

初始化項目

初始化項目有多種方式,建議采用 Webpack 模板模式

1.進(jìn)入需要創(chuàng)建Vue項目文件夾,打開DOS命令行輸入:vue init webpack 項目名稱

2.然后終端會出現(xiàn)下圖“一問一答”模式

“Project name”:這個是項目名稱,默認(rèn)是輸入時的那個名稱,想改的話直接輸入修改,也可以直接回車

“Install vue-router”:是否需要vue-router,這里默認(rèn)選擇使用,這樣生成好的項目就會有相關(guān)的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint,剛才說了我們這個項目需要使用所以也是直接回車,默認(rèn)使用,這樣會生成相關(guān)的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安裝單元測試。由于我們現(xiàn)在還沒有單元測試,所以這里選擇的是”N”

“Setup e2e tests with Nightwatch”:是否安裝e2e測試,這里我也同樣選擇的是“N”

3.下載依賴包

cd ‘項目文件' 終端執(zhí)行命令:npm install .這個過程會生成一個node_modules 文件夾

4.調(diào)試項目

終端輸入:npm run dev/start

5.打開Google Chrome ,默認(rèn)項目地址:localhost://8080,訪問即可。F12啟用開發(fā)者調(diào)試工具,調(diào)試菜單欄選擇 Vue

開發(fā)過程

1.相關(guān)文件說明

build和config >webpack配置相關(guān)文件

node_modules>項目需要的模板文件

src/main.js>入口js文件

src/assets>公共的樣式,圖片文件

src/components>各種vue組件文件

src/App.vue>頁面主組件

src/router>vue-router 路由配置文件

static>靜態(tài)資源文件(不會被webpack處理)

.eslintrc.js>eslint檢查配置文件

.editorconfig>代碼編輯環(huán)境配置文件

.eslintignore>eslint檢查忽略文件

.babelrc>babel編譯參數(shù)配置文件

index.html>主頁,項目入口文件

package.json>項目配置文件,描述項目信息和依賴

README.md>項目的說明文檔

2.新增組件

在 \src\components 目錄新建 vue 文件(每一個.vue文件都是一個單獨(dú)vue組件,用來實現(xiàn)頁面特定的功能界面,包括基本的骨架html+CSS+js)。例如 Hellovue.vue,vue文件代碼標(biāo)準(zhǔn)模板樣式如下:

  <template>
    <div id="...">
      組件html模板
    </div>
    </template>

    <style>
      css相關(guān)樣式
    </style>

    <script>
    export default { //默認(rèn)向外暴露一個對象
      name:'Hellovue',
      data () {
        return {};// data保存數(shù)據(jù)必須返回一個對象
      }
    };
    </script>

1.引入組件

1.在App.vue主文件中script標(biāo)簽添加import Hellovue form ./components/Hellovue.vue導(dǎo)入子組件。

2.組件模板對象添加components屬性。

3.重啟項目即可看到自己定義的組件。

4.新增頁面(利用vue路由實現(xiàn))在 \router\index.js 添加新增頁面路由

import Hellovue from '@/components/Hellovue'
...
  {
   path: '/Hellovue',
   name: 'Hellovue',
   component: Hellovue
  }

在App.vue主頁面掛載<router-link to='Hellovue'>跳轉(zhuǎn)我的頁面</router-link>即可

1.打包編譯

終端運(yùn)行命令編譯

npm run build

即可產(chǎn)品dist文件,項目上線后只需把dist文件丟到服務(wù)器即可。ps:如果本地測試,則需修改webpack生產(chǎn)環(huán)境下的assetsPublicPath配置

注意事項:

1.最好使用cnpm代替npm安裝依賴,因為開發(fā)過程中少部分包如果用npm是無法下載完成,一直卡住,換為cnpm毫無壓力記得加上--save選項,否則別人安裝的話會缺少包.

2.路徑說明

‘/‘, 表示項目根目錄

‘./‘,表示當(dāng)前目錄

‘../‘ ,表示上一級目錄,可以連續(xù)多個,比如‘../../../‘表示往外層退3級目錄

3.所有組件的數(shù)據(jù)都必須放置在data函數(shù)返回的對象中,無論是否有數(shù)據(jù),否則會報錯。
4.一個template組件下只能有一個并列的div,否則報錯。

5.ESLint 格式問題

1.vue 創(chuàng)建項目時,ESLint 選擇啟用時候,因 ESLint 代碼檢查極其嚴(yán)格,縮進(jìn)空格數(shù)量,尾部空行等皆在檢查之列,可以選擇關(guān)閉。

build/webpack.base.conf.js 注釋掉 module->rules 中 ESLint 規(guī)則,關(guān)閉代碼:

//...(config.dev.useEslint ? [createLintingRule()] : []),

規(guī)范起見,修改 .eslintrc.js 文件 rules 節(jié)點(diǎn),關(guān)閉指定格式檢查。

例如'semi': ['off', 'always'], 需要分號的地方即錄入,否則 ESLint 強(qiáng)制檢查不錄入分號。說明參照https://eslint.org/docs/rules/semi。隨后重新 npm run dev 即可。完整說明參照https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md?;蛘咴?eslintignore文件下配置相關(guān)忽略ESlint檢查的文件格式,如:*.js,eslint則默認(rèn)忽略根目錄下所有的js文件。

2.Tab Size 調(diào)整

多數(shù)開發(fā)工具 Tab Size 默認(rèn) 4,ESLint 默認(rèn) 2,需要將開發(fā)工具 Tab Size 默認(rèn)值調(diào)為2或關(guān)閉 ESLint

3.VUE 腳本結(jié)束標(biāo)志 </script> 或者.vue文件結(jié)尾</style>不能作為文件結(jié)尾,其后必須另起一行寫入其它代碼,必要時插入空行.

常見問題:

1.npm run dev 提示 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

not found module ‘xxx'

原因:依賴庫不完整
方案:項目所在目錄運(yùn)行 npm install xxx -S 安裝相關(guān)依賴包,或按照如下指定安裝相關(guān)版本,npm install xx@版本號 -S。

2.安裝插件提示 npm WARN rollback Rolling back ...... failed (this is probably harmless): EPERM: operation not permitted

原因:npm 權(quán)限不足

方案:安裝所在目錄設(shè)置權(quán)限

npm config set user 0
npm config set unsafe-perm true

3.npm run build 后,打包生成的dist文件本地測試發(fā)現(xiàn)404錯誤。

原因:本地測試當(dāng)前文件默認(rèn)路徑以‘./'開頭,vue配置文件中默認(rèn)以‘/'開頭

方案:設(shè)置config/index.js中assetsPublicPath屬性值為‘./'

vue項目啟動原理

1.讀取 package.json 文件 scripts 內(nèi)部節(jié)點(diǎn),例 start / build / dev 節(jié)點(diǎn),根據(jù)節(jié)點(diǎn)值獲得相應(yīng)啟動參數(shù)

2.Webpack配置項目入口文件,出口文件名。

在.\build\webpack.base.conf.js文件配置入口文件module.exports.entry值即項目總?cè)肟冢J(rèn)為 ./src/main.js。

在config/index.js文件中build對象assetsRoot中配置打包后文件名。

3../src/main.js。頁面入口js文件,實例化一個Vue,平且引入vue和主入口組件。componens和template屬性缺一不可。

new Vue({
 el: '#app',
 router,
 components: { App }, // 定義組件映射
 template: '<App/>'  // 定義組件模板
})

1.打包項目提交到Svn或github注意不要提交node_modules文件夾,以免造成資源浪費(fèi)

附件

1.幫助文檔

vuex狀態(tài)管理庫:https://vuex.vuejs.org/zh/guide/

vue中文網(wǎng):https://cn.vuejs.org/

vue-axioshttps://www.npmjs.com/package/vue-axios

vue-routerhttps://router.vuejs.org/zh/

webpack中文網(wǎng)https://www.webpackjs.com/

2.安裝 cnpm 淘寶鏡像避免FQ

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后安裝相關(guān)命令可用 cnpm 代替 npm。

淘寶鏡像包與原包存在一定差異,避免莫名其妙問題起見,盡量使用原包命令 npm 安裝,可以使用 hosts FQ模式。

3.依賴包出錯刪除重裝

刪除全局包

npm uninstall -g 包名

刪除本地包

npm uninstall 包名

不成功可以采用 remove 代替 uninstall

4.引用外部 js

引用外部 js 有全局引用、VUE 外部引用、VUE 內(nèi)部引用等多種方法

1.內(nèi)部引用

A. 安裝模塊至項目目錄(jQuery案例)

npm install jquery --save

B. 確認(rèn) package.json dependencies 節(jié)點(diǎn)已添加依賴
"jquery": "^3.3.1",

C. Vue 文件直接引用

import $ from 'jquery'

2.全局引用

A. 在package.json中添加依賴文件dependencies:{"jquery":"^2.2.1"} //可以自己指定版本

B. 重新安裝項目依賴cnpm install

c. 在webpack.base.conf.js中module.exports中提供一個全局變量:$

總結(jié)

以上所述是小編給大家介紹的從零到一詳聊創(chuàng)建Vue工程及遇到的常見問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

  • vue路由導(dǎo)航守衛(wèi)和請求攔截以及基于node的token認(rèn)證的方法

    vue路由導(dǎo)航守衛(wèi)和請求攔截以及基于node的token認(rèn)證的方法

    這篇文章主要介紹了vue路由導(dǎo)航守衛(wèi)和請求攔截以及基于node的token認(rèn)證的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • vuex新手進(jìn)階篇之取值

    vuex新手進(jìn)階篇之取值

    Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之取值的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • 如何搭建一個完整的Vue3.0+ts的項目步驟

    如何搭建一個完整的Vue3.0+ts的項目步驟

    這篇文章主要介紹了如何搭建一個完整的Vue3.0+ts的項目步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • 在Vue中使用scoped屬性實現(xiàn)樣式隔離的原因解析

    在Vue中使用scoped屬性實現(xiàn)樣式隔離的原因解析

    scoped是Vue的一個特殊屬性,可以應(yīng)用于<style>標(biāo)簽中的樣式,這篇文章給大家介紹在Vue中,使用scoped屬性為什么可以實現(xiàn)樣式隔離,感興趣的朋友一起看看吧
    2023-12-12
  • axios攜帶cookie配置詳解(axios+koa)

    axios攜帶cookie配置詳解(axios+koa)

    這篇文章主要介紹了axios攜帶cookie配置詳解(axios+koa),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • 利用Vue2.x開發(fā)實現(xiàn)JSON樹的方法

    利用Vue2.x開發(fā)實現(xiàn)JSON樹的方法

    這篇文章主要給大家介紹了關(guān)于利用Vue2.x開發(fā)實現(xiàn)JSON樹的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2018-01-01
  • vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配

    vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配

    這篇文章主要為大家介紹了vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • keep-alive include和exclude無效問題及解決

    keep-alive include和exclude無效問題及解決

    這篇文章主要介紹了keep-alive include和exclude無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue中使用svg畫路徑圖的詳細(xì)介紹

    vue中使用svg畫路徑圖的詳細(xì)介紹

    這篇文章主要介紹了vue中使用svg畫路徑圖的相關(guān)知識,在這大家需要注意svg中不能使用html標(biāo)簽,例如div,img等,因此在svg中一般使用image標(biāo)簽放置圖片,text圖片放置文本內(nèi)容,詳細(xì)代碼跟隨小編一起看看吧
    2022-04-04
  • 詳解Vue 普通對象數(shù)據(jù)更新與 file 對象數(shù)據(jù)更新

    詳解Vue 普通對象數(shù)據(jù)更新與 file 對象數(shù)據(jù)更新

    本篇文章主要介紹了詳解Vue 普通對象數(shù)據(jù)更新與 file 對象數(shù)據(jù)更新 ,具有一定的參考價值,有興趣的可以了解一下。
    2017-04-04

最新評論