Vue腳手架的簡單使用

Genng 發布于2019-08-22 18:35 / 3037人閱讀

摘要：提前申明注意自己對腳手架的理解和認識，很多東西和理解都是形象上的手法，并不專業和官方一種項目構建工具，可以將和壓縮成一個文件。之后使用項目名進入項目根目錄，使用來自動安裝項目依賴。

提前申明

注意：自己對vue腳手架的理解和認識，很多東西和理解都是形象上的手法，并不專業和官方

webpack

一種項目構建工具，可以將css和js壓縮成一個文件。此外，可以提供測試用服務器。使用webpack時，可以配置一些默認擴展名 和 路徑別名 來在項目文件里直接使用

導入和導出

使用export命令可以將一個JS對象導出，其他JS文件可以使用import 對象名 from 路徑的形式導入這個對象來使用，但是在導入時，必須知道導入導出對象的名字。如果使用export default命令導出對象的話，其他JS文件在導入時就無需知道導出對象的名字，可以自定義對象名

ps：export和import為es6規范中的關鍵字，目前僅被少量JS運行平臺實現，在腳手架里會被自動用babel轉換成es5對應語法 組件中自定義標簽名的大小寫問題

在大多數瀏覽器解析HTML時，不區分標簽的大小寫。自定義標簽中的大寫字母會被自動轉換為小寫字母，如會被轉換為 first 標簽，因此導致與注冊時提供的標簽名不一致，出現組件未正確注冊的錯誤。

如果使用自定義組件時，代碼寫在template標簽里，在解析時就會被當做JS解析，是區分大小寫的。

組件的另外一種寫法

使用腳手架創建項目 安裝NodeJS

腳手架的安裝及運行均依賴NodeJS，可以在命令行鍵入node -v來查看是否安裝NodeJS。

下載NodeJS

配置npm全局路徑

npm config set prefix "D: odejs ode_global"
npm config set cache "D: odejs ode_cache"
之后將第一個路徑同時配置到環境變量path中。

配置淘寶npm鏡像

npm config set registry https://registry.npm.taobao.org

安裝vue-cli

在命令行中執行npm install -g vue-cli。

創建模板項目

//vue init 模板名 項目名

vue init webpack simple

模板名可以在 https://github.com/vuejs-temp... 查看，推薦使用webpack。

之后使用cd 項目名進入項目根目錄，使用npm install來自動安裝項目依賴。

其他常用命令

項目根目錄下執行npm run dev可以測試運行項目，執行npm run build可以正式編譯項目到dist目錄下。

目錄結構

單文件組件

補充：在Vue腳手架中使用jquery和其他框架

在項目根目錄安裝jquery npm install jquery（注意大小寫，jquery和jQuery不一樣）。

build目錄下的webpack.base.conf.js
開頭加入

const webpack = require("webpack")

module.exports的最后加入（注意JS代碼格式，不要忘了寫逗號）

plugins: [
    new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery"
    })
]

之后，需要使用jquery的組件中導入juuery，如

使用其他js框架的方法鏈接

GPU云服務器云服務器腳手架使用 vue使用webrtc vue 中使用 webrtc vue怎么使用webRTC

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96022.html

簡單vue項目腳手架

摘要：簡單項目腳手架地址使用技術棧需要學習的知識內容相當多，尤其是教程，官方腳手架雖然相當完整齊全，但是修改起來還是挺花時間，于是自己參照網上的資料和之前做過的項目用到的構建工具地去寫了一個簡單項目腳手架。簡單vue項目腳手架 github地址使用技術棧 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1...

opengps 2019-08-21 11:42 評論0 收藏0
記一次基于vue的spa多頁簽實踐經驗

摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現方法有興趣，歡迎點擊本文結尾的鏈接，去我的倉庫上查看。前言最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝要求實現多頁簽,并且可以通過瀏...

ispring 2019-08-26 12:13 評論0 收藏0
記一次基于vue的spa多頁簽實踐經驗

摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現方法有興趣，歡迎點擊本文結尾的鏈接，去我的倉庫上查看。前言最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝要求實現多頁簽,并且可以通過瀏...

張遷 2019-08-02 11:15 評論0 收藏0
Vue運行時全解析 - VueCLI3上手（一）

摘要：可以譯作運行時過程全面分析和解析，這個全面分析涉及到比較基礎的或者復雜的重要前端概念和中的概念等。注本篇是運行時全解析系列文章的第一篇，首次發表于，友善轉載蟹蟹。附更多內容請參考核心維護者蔣豪群同學的的公開課視頻 Vue Runtime Full Analysis - VueCLI3 Get Start VRFA: (Vue Runtime Full Analysis) 可以譯作vue...

molyzzx 2019-08-23 12:04 評論0 收藏0