vue+webpack4建立應用(一)練習
新建資料夾webpacktest
初始化專案
npm init
會出現選項練習專案一律預設即可,會生成package.json
安裝
npm i webpack vue vue-loader
會出現WARN
npm WARN [email protected] requires a peer of [email protected]* but none is installed. You must install peer dependencies yourself.
需要安裝 css-loader
npm i css-loader
- 新建資料夾src
- 在src中新建檔案app.vue(元件)
- 在src中新建assets檔案
- 在assets中新建images和styles檔案放入圖片和樣式
app.vue(元件)
**練習** //元件不能直接掛載到html裡 <template> <div id="test">{{text}}</div> </template> <script> export default { data() { return{ text:'abc4564' } } } </script> <style scoped> #test{color:red;} </style>
styles檔案中新建test.css
body{
color: red;
background-image: url('../images/large.jpg')
}
新建js檔案webpack.config.js(打包前端資源)
//打包出來在瀏覽器可以直接執行的js程式碼 const path = require('path') //path是node.js裡的基本包 const HTMLPlugin = require('html-webpack-plugin') const webpack = require('webpack') const VueLoaderPlugin = require('vue-loader/lib/plugin') //webpack4配置需要包含VueLoaderPlugin const isDev = process.env.NODE_ENV === 'development' //判斷是不是true const config = { target: "web", entry: path.join(__dirname,'src/index.js'), //入口entry要使用絕對路徑 _dirname是根目錄 拼接路徑形成絕對路徑,保證絕對可以訪問到我們的檔案 output: { filename: "bundle.js",//輸出的檔名 path: path.join(__dirname,'dist') //輸出路徑 }, //出口,輸出檔案 module: { rules: [ { test: /\.vue$/, loader: "vue-loader" }, { test:/\.css$/, //loader:['style-loader','css-loader'] use:['style-loader','css-loader'] //css會以js程式碼出現 }, { test:/\.(gif|jpg|jpeg|png|svg)$/, use:[ { loader:'url-loader', options:{ limit:1024, name:'[name].[ext]' }// 圖片 } ] } ] }, plugins: [ new VueLoaderPlugin(), new webpack.DefinePlugin({ 'process.env':{ NODE_ENV: isDev ? '"development"' : '"production"' } }), new HTMLPlugin() ]//webpack4配置需要包含VueLoaderPlugin,在輸出裡面配置plugins: } if (isDev){ config.devServer = { port:8000, host:'0.0.0.0', overlay:{ errors:true, }, // open:true //自動開啟瀏覽器 } } module.exports = config
package.js > script下新增程式碼如下:
因為只有在這裡配置了,才能執行內部的webpack
"build": "webpack --config webpack.config.js"
在src中新建index.js(入口檔案)
//入口檔案
import Vue from 'vue' //映入vue類庫
import App from './app.vue' //app來自vue檔案
import './assets/styles/test.css'
import './assets/images/large.jpg'
const root = document.createElement('div')
document.body.appendChild(root) //建立節點
new Vue({
render:(h) => h(App) //把app掛載到html裡
}).$mount(root) //呼叫api,$mount到html的節點裡
繼續build
npm run build
會出現報錯npm WARN [email protected] requires a peer of [email protected]…
需要安裝 vue-template-compiler
npm i vue-template-compiler
繼續build
npm run build
成功後會出現dist資料夾和bundle.js
安裝
npm i style-loader url loader file-loader
安裝
npm i cross-env
package.js > script下修改並新增程式碼如下:
"build": "cross-env NODE_ENV=PRODUCTION webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
執行
npm run dev
相關推薦
vue+webpack4建立應用(一)練習
新建資料夾webpacktest 初始化專案 npm init 會出現選項練習專案一律預設即可,會生成package.json 安裝 npm i webpack vue vue-loader 會出現WARN npm WARN [email pr
axios在vue中的應用(一)—— 簡單呼叫
目錄 1. 安裝並引入axios 1.1 使用 npm/cnpm 安裝 1.2 在main.js檔案中引入axios 2. 使用axios請求本地json檔案 3. 將傳遞的json資料轉為FormData 3.1 引入qs 3.2 新增請求攔截器,將axios
vue+cordova建立Hybird混合應用(一)----從安裝到輸出第一個應用
為什麼寫這篇文章呢?因為這是一種構建簡單跨平臺移動應用的便捷方式。個人認為這比React Native簡單的多,很容易上手。解決小型應用綽綽有餘。 1、安裝java 2、安裝node.js 4、安裝android studio 安裝android stu
Socket的應用(一)——建立一個簡單的回顯客戶端/伺服器
在這篇文章中,我們將利用Python的Socket模組,編寫一個簡單的本地TCPC/S應用:建立Server和Client,在開始時Server等待Client的請求過程中,Server顯示出等待資訊,之後Client連線上Server併發送訊息,最後Server則要回顯出來自客戶端的所有輸出,併發
.net core + vue開發單頁應用(一)
背景 .net core 與 vue 的簡介不再贅述,目前使用vue開發基本分為幾種情況: 使用webpack進行純前端開發傳統的web應用中使用vue,主要使用vue的物件模型繫結 對於使用傳統的web+vue進行單頁面應用開的幾乎沒有找到例子,因此決定自己動手嘗試,
VUE 爬坑之旅-- 從零開始一步一步構建 VUE 單頁應用(二)
上篇 從零開始一步一步構建 VUE 單頁應用(一) 對單頁應用做了簡單的介紹並建立了一個單頁應用的模版。這篇就先來看看這個專案的檔案結構,然後再看看要怎麼修改才能實現我們自己的頁面。 檔案結構 用官方的 vue-cli 生成的專案檔案結構如上圖所示
(一)百度AI 平臺API呼叫之建立應用(2018)
本文為百度AI 開放平臺API呼叫之前的建立應用。為什麼要建立呢,建立後百度才知道我們要用哪一個介面呀。接下來的幾篇博文是百度AI 開放平臺API呼叫相關的python3實現過程。1、百度AI,找到需要
VUe+webpack構建單頁router應用(一)
前期看了很多webpack的介紹,之前一直用requireJS或者browserify,真正決心來使用webpack,實在是因為webpack好像確實功能更全。 這期想做的是通過webpack和vue-router搭建一個單頁應用,並且將vue的transit
Storm概念、原理詳解及其應用(一)BaseStorm
when 結構 tails 並發數 vm 虛擬機 cif 異步 優勢 name 本文借鑒官文,添加了一些解釋和看法,其中有些理解,寫的比較粗糙,有問題的地方希望大家指出。寫這篇文章,是想把一些官文和資料中基礎、重點拿出來,能總結出便於大家理解的話語。與大多數“wordc
WCF學習——構建一個簡單的WCF應用(一)
frame port app 位置 協定 enc splay msdn ons 本文的WCF服務應用功能很簡單,卻涵蓋了一個完整WCF應用的基本結構。希望本文能對那些準備開始學習WCF的初學者提供一些幫助。 在這個例子中,我們將實現一個簡單的計算器和傳統的分布式通信框架一樣
vuex實踐之路——筆記本應用(一)
time 中大 -- this 隔離 思想 一個表 環境搭建 一定的 首先使用vue-cli把環境搭建好。 介紹一下應用的界面。 App.vue根組件,就是整個應用的最外層 Toolbar.vue:最左邊紅色的區域,包括三個按鈕,添加、收藏、刪除。 NoteList.vu
OPENCV----在APP性能測試中的應用(一)
核心 color frame pan ems span urn sqrt || 應用項目: APP的性能測試 應用場景: APP啟動速度 視頻開播速度 加載速度 等~~ 緣來: 基於APP日誌和UiAutomator的測試方案,測試結果不能直白且精確的
活動目錄的綜合應用(一)
windows 侯良金 活動 一、活動目錄相關概念1、使用活動目錄的優點:集中管理、便捷的訪問網絡資源、可擴展性。2、域的概念:活動目錄的一種實現形式,也是活動目錄最核心的管理單位。3、域控制器:就是安裝了活動目錄服務的一臺計算機。活動目錄的數據都儲存在域控制器內!4、名稱空間:是一個區域的名字,
vue遇到的坑(一)——數組更新
clas $set 必須 被調用 img block 更新 存在 left 最近在項目中遇到個問題,數組已經更新了,但是頁面中的DOM並沒有觸發變化。我一直以來的想法就是: 既然vue實現的實時數據雙向綁定,那麽在model層發生了變化之後為什麽就沒有在view層更新呢?
java中的棧Stack的基本使用和應用(一)
string emp tac logs tor str col () bject 棧 定義 棧是一種只能在一端進行插入或刪除操作的線性表。(先進後出表) java中的Stack繼承Vector 實例化 Stack stack=new Stack(); 基本使用 判斷是
vue路由的使用(一)
outer 圖片 sta info npm highlight ack 配置 cal 1.路由的安裝 這一步我簡單說一下,重心放在如何去使用路由上面。 如果是用vue-cli來構建vue項目,在使用 vue init webpack 項目名稱 構建的時候會提示你是否安
git 在windows下的應用(一) - 本地倉庫代碼管理
軟件研發 研發管理 訪問https://gitforwindows.org/? 下載一個安裝包,一路next下去git config --global user.name "Pcdog" git config --global user.email "[email protected]"cd d:
SSM應用(一)--Spring入門
得到 執行 主動 關系 ted img 我們 ica http Spring是什麽 Spring是一個框架; Spring是一個容器框架; Spring用於管理bean(Java類),並維護bean(Java類)之間的關系; 容器框架:整個web都屬
vue-router學習筆記(一)
改變 from 發生 回調 筆記 win 存在 下一個 表示 學習vue-router首先要認識的兩個屬性 $router 和 $route。 $router指的是router實例,$route則是當前激活的路由信息對象,是只讀屬性,不可更改,但是可以watch(監聽)。
NFS和SAMBA的簡單應用(一)
NFS和SAMBA的簡單應用NFS和SAMBA的簡單應用(一) (1)使用samba和NFS分別共享/data目錄; (2)讓samba客戶端和NFS客戶端分別掛載samba服務器上共享的/data/至本地的/mydata目錄;本地的mysqld或mariadb服務的數據目錄設置為/myda